广告：宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买

随着小程序的发展，已经有越来越多人加入了小程序开发的行列。而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.jsexport 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，在需要使用的页面中引用即可。

以上就是如何在小程序中设置uniapp的tabbar的详细内容，更多请关注9543建站博客其它相关文章！

广告：SSL证书一年128.66元起，点击购买~~~