随着小程序的发展，已经有越来越多人加入了小程序开发的行列。而uniapp则是一个跨平台开发工具，可以实现一套代码开发多个端（包括小程序）的效果。那么，如何在小程序中设置uniapp的tabbar呢？
首先，在uniapp中设置tabbar需要在pages.json文件中进行配置。而在小程序中，我们需要先将pages.json文件中的tabbar选项转化成小程序的语法。具体来说，要将tabBar中的list中的每一项的text、pagePath、iconPath、selectedIconPath分别转化成对应的小程序语法如下：
"tabBar": {
"list": [
{
"text": "首页",
"iconPath": "static/img/tabbar/home.png",
"selectedIconPath": "static/img/tabbar/home-active.png",
"pagePath": "pages/index/index"
},
{
"text": "分类",
"iconPath": "static/img/tabbar/cate.png",
"selectedIconPath": "static/img/tabbar/cate-active.png",
"pagePath": "pages/cate/cate"
}
]
}然后，在小程序的页面中，我们需要使用uni.getTabBar()方法获取小程序的tabbar对象，然后根据uniapp中配置的tabbar进行对应的设置。代码如下：
<template>
<view>
<text>首页</text>
</view>
</template>
<script>
export default {
onShow() {
// 获取tabbar对象
let tabBar = uni.getTabBar();
// 设置当前tab的下标
tabBar.setSelectedItem({
index: 0
});
// 设置当前tab的文字
tabBar.setItemText({
index: 0,
text: '首页'
});
// 设置当前tab的图标
tabBar.setIcon({
index: 0,
iconPath: 'static/img/tabbar/home.png',
selectedIconPath: 'static/img/tabbar/home-active.png'
});
}
}
</script>以上代码中，onShow为小程序生命周期中的一个钩子函数，在小程序中页面被展示时会被自动调用。在这个钩子函数中，我们获取了小程序的tabbar对象，然后根据uniapp中配置的tabbar进行设置。
最后，在小程序的每个页面中都需要进行以上的设置。为了避免重复的代码和不必要的麻烦，我们可以使用uniapp提供的mixin特性，将这些设置封装成一个mixin，然后在需要使用的页面中引用即可。具体代码如下：
// tabBarMixin.js
export default {
onShow() {
// 获取当前页面路径
let pages = getCurrentPages();
let currentPage = pages[pages.length - 1].route
// 获取tabbar对象
let tabBar = uni.getTabBar();
// 遍历tabbar中的每一个tab，找到与当前页面路径匹配的tab
tabBar.list.forEach((item, index) => {
if (item.pagePath == currentPage) {
// 设置当前tab的下标
tabBar.setSelectedItem({
index: index
});
// 设置当前tab的文字
tabBar.setItemText({
index: index,
text: item.text
});
// 设置当前tab的图标
tabBar.setIcon({
index: index,
iconPath: item.iconPath,
selectedIconPath: item.selectedIconPath
});
}
});
}
}
// index.vue
<script>
import tabBarMixin from '@/mixins/tabBarMixin'
export default {
mixins: [tabBarMixin]
}
</script>以上代码中，我们将所有的tabbar设置封装成了一个mixin，然后在需要使用的页面中引用。这样做的好处是，可以避免代码重复，同时也能够方便地统一管理tabbar的设置。
总结来说，uniapp在小程序下设置tabbar需要先将pages.json文件中的配置转化成小程序的语法，然后在小程序的页面中使用uni.getTabBar()方法获取tabbar对象，根据uniapp中配置的tabbar进行设置。为了避免重复的代码，可以将tabbar设置封装成一个mixin，在需要使用的页面中引用即可。
