在小程序开发者，自定义tabbar，根据权限角色不同，显示不同的tabbar，经常遇到，这里给出一个解决方案。 1、修改app.json [代码]"tabBar": { "custom":true } [代码] 2、在项目根目录创建一个文件夹 custom-tab-bar，组件，如图 [图片] custom-tab-bar/index.js [代码]Component({ /** * 组件的属性列表 */ properties: { }, /** * 组件的初始数据 */ data: { active: -1, list: [ { value: 0, show: true, label: '首页', icon: 'home', url: '/pages/index/index' }, { value: 1, show: true, label: '订单', icon: 'task', url: '/pages/order/index/index' }, { value: 2, show: true, label: '我的', icon: 'user', url: '/pages/my/index/index' }, ], }, /** * 组件的方法列表 */ methods: { onChange({detail: {value}}) { const {list} = this.data; console.log('value', value) this.setData({ active: value, }); wx.switchTab({ url: list[value].url, }) }, init() { const page = getCurrentPages().pop(); let urls = this.data.list.map(v => v.url); let active = urls.findIndex(v => v === `/${page.route}`); console.log('active',active) this.setData({ active }); }， toggleMenu(role) { // 在这里处理具体的权限业务逻辑 // 下面是伪代码 let {list} = this.data; if (role == 1) { list[1].show = false; this.setData({list}); } }, } }) [代码] custom-tab-bar/index.json [代码]{ "component": true, "usingComponents": { "t-tab-bar": "tdesign-miniprogram/tab-bar/tab-bar", "t-tab-bar-item": "tdesign-miniprogram/tab-bar-item/tab-bar-item" } } [代码] custom-tab-bar/index.wxml [代码]<t-tab-bar t-class="t-tab-bar" value="{{active}}" bindchange="onChange" theme="tag" split="{{false}}"> <block wx:for="{{list}}"> <t-tab-bar-item wx:if="{{item.show}}" wx:key="index" value="{{item.value}}" icon="{{item.icon}}"> {{item.label}} </t-tab-bar-item> </block> </t-tab-bar> [代码] 3、在tabbar关联页面初始化tabbar组件的init方法 上面我们在tabbar写了三个路由，那么在这三个相对应的页面，都要调用一下下面的代码 [代码]onShow() { this.getTabBar().init() }, [代码] 通过以上步骤已经实现了自定义tabbar的逻辑。 关于角色权限下的tabbar 在有些场景下，我们需要权限来控制显示tabbar，这个时候，我们可以在首页，请求数据，然后调用[代码]this.getTabBar().toggleMenu();[代码] 来改变要显示的菜单，这样我们根据角色权限的tabbar就完成了。