关于配置自定义tab-bar的方法可以参考微信官方文档
如题：最近公司在做微信小程序，遇到了不同权限用户有不同权限的需求，简单的自定义tab-bar已无法满足需要了。自己在网上搜了很多关于动态渲染对应tab-bar的案例，有的可以实现显示对应权限tab-bar，但是切换点击就会有选中样式闪烁和不对应的问题。找了很久才找到，也非常感谢那位大佬教程，让自己也有思路和想法，非常感谢哇！
废话不说了，直接上代码吧
在登录成功的时候把权限标识存入app.js的全局数据（globalData）中，方便其他界面和组件读取，提前在app.js的globalData中定义好对应权限的tabbar数组。
在custom-tab-bar（自定义组件）组件中赋值给对应的list
attached() {
let that = this
that.setData({
list: app.globalData.tabList
})
getApp().watch(that.watchBack.bind(that)) // 监听并回调
},
methods: {
watchBack(list) {
this.setData({
list: list
})
},
switchTab(e) {
const data = e.currentTarget.dataset;
const url = data.path;
console.log(data, this.data.list);
console.log(e.currentTarget.dataset.index);
wx.switchTab({
url:url
})
}
}
请注意：这里很容易出问题： 默认是a权限，而登录拥有b权限的后，tabbar还是原来默认权限a，而不是切换后的tabbar，所以app.global DATa.tabList还是默认值，因此要对全局的globalData的tabList数据进行监听才行。
注意：在监听的时候 getapp().watch(that.watchBack.bind(that))需要注意
// 如果是getApp().watch(that.watchBack)
// 那么在watchBack回调函数中执行this.setData 这个this指向的是undefined，因此需要改变this指向！
getApp().watch(that.watchBack.bind(that))
// 这里试验用call和apply无法改变this，原因后面来讲
在app.js中定义好watch监听方法
// app.js中使用Object.defineProperty监听 自定义watch函数
watch:function (method) {
var obj = this.globalData;
var temp = obj.tabList;
Object.defineProperty(obj,"tabList", {
configurable: true,
enumerable: true,
set: (value) => {
temp = value
method(value); // 这里回调传值
},
get:function(){。
return temp
}
})
},
这里就可以正常获取到tabList的值并且赋值，这里夹杂着Object.defineProperty，我搞的也不太清晰，反正正大改搞懂。所以说写代码思路真的很重要~~~~
经过实际操作后测试发现这种方式有个很坑的问题，ios在加载tab-bar的时候，如果初始化时默认值为两个tab，动态生成三个，ios会采用初始化的值，应该是用的缓存中的初始值，后续赋值就无效。
改进：
将赋值放到页面上操作，不在组件或者app.js中操作tabList的值。
可以在index组件（首页）onSHow方法中去判断，只需要在首页中设置一次就可以了，不用每个tabbar界面去设置
onShow() {
//app.globalData.tabList2 为新值 ，app.globalData.tabList为初始化的值，判断后根据实际情况赋值。
this.getTabBar().setData({
list: app.globalData.tabList2,
})
}
或者这样去设置
if(app.globalData.role==0){
this.getTabBar().setData({
list:app.globalData.tabList1,//这是权限1的tabbar
})
}else{
this.getTabBar().setData({
list:app.globalData.tabList2,//这是权限2的tabbar
})
}到这里会发现可以在登录后去动态更新tabbar了，是不是很神奇。先别急着开心，你会发现切换的时候发现选中的icon和样式没有切换过来，解决问题可以这样来：
在对应的界面去设置选中，这里如index（首页）的onShow方法中
onShow(){
this.getTabBar().setData({
selectedindex:0 //注意 tabbar界面从 0 1 2 3 ... 在每个对应组件onShow中设置对应的选中数组
})
}这样就搞定了权限动态调整tabbar的需求了。文章来源：https://www.toymoban.com/news/detail-487759.html
参考连接：微信小程序动态设置tab-bar，解决自定义tabBar选中时的状态变换：通过 getTabBar 接口获取组件实例文章来源地址https://www.toymoban.com/news/detail-487759.html
到了这里，关于微信小程序根据权限动态生成对应权限的tab-bar的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
