首先，在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的详细内容。