小程序中动态自定义tabbar

小程序中动态自定义Tabbar实现
开发需求：根据用户权限显示不同的tabbar*
参考微信文档自定义Tabbar实例（https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html）修改。
《为方便理解，贴出完整代码》
1,app.json中：
“tabBar”: {
“custom”: true,//自定义tabbar
“list”: [
//所有tabbar页面声明
]
},
2,app.js中：
globalData: {
list: []
//声明全局变量
},
onLaunch({
//登录code,获取用户openid以及拿取后台的用户信息
//控制tabbar,修改变量为所展示tabbar
if(xx==’’){
//第一种tabbar
this.globalData.list = [
{
pagePath: “/pages/xx/xx”,
iconPath: “/image/xx.png”,
selectedIconPath: “/image/xx.png”,
text: “首页”
},
{
pagePath: “/pages/xx/xx”,
iconPath: “/image/xx.png”,
selectedIconPath: “/image/xx.png”,
text: “管理”
},
{
pagePath: “/pages/xx/xx”,
iconPath: “/image/xx.png”,
selectedIconPath: “/image/xx.png”,
text: “我的”
}
]
})
}else{
//第二种tabbar
this.globalData.list = [
{
pagePath: “/pages/xx/xx”,
iconPath: “/image/xx.png”,
selectedIconPath: “/image/xx.png”,
text: “首 页”
}，
{
pagePath: “/pages/xx/xx”,
iconPath: “/image/xx.png”,
selectedIconPath: “/image/xx.png”,
text: “我 的”
}
]
})
}
3,修改custom-tab-bar/index.js
const app =getApp();
Component({
data: {
selected: 0,
color: “#7A7E83”,
selectedColor: “#1296db”,
list: []
},
// 生命周期
attached() {
console.log(app.globalData.list)
this.setData({
list:app.globalData.list
})
},
methods: {
//切换tabbar
switchTab(e) {
const data = e.currentTarget.dataset
const url = data.path
wx.switchTab({url})
this.setData({
selected: data.index
})
}
}
})
4，配置好以上就可以看到效果，能正常切换。不过选中状态会有问题所以还要处理一下
tabbar页面中的.js文件中处理一下
onShow: function() {
//添加选中效果
if (typeof this.getTabBar === ‘function’ && this.getTabBar()) {
//自定义组件的getTabBar 方法，可获取当前页面下的自定义 tabBar 组件实例。
this.getTabBar().setData({
selected: 0 //这个是tabBar中当前页对应的下标
})
}
},