优雅实现微信小程序动态tabBar，根据不同用户角色显示不同底部导航-更新版（支持自由组合总数超过5个tabBar菜单）

// Tab页的data let tabData = { tabIndex: 0,//底部按钮高亮下标 tabBar: { custom: true, color: "#5F5F5F", selectedColor: "#07c160", backgroundColor: "#F7F7F7", list: [] } } // 更新菜单 const updateRole = (that, type) => { //这里设置权限（0：显示2个按钮，1：显示4个按钮） if (type === '0') { tabData.tabBar.list=[ { "pagePath": "pages/index1", "iconPath": "/image/icon_component.png", "selectedIconPath": "/image/icon_component_HL.png", "text": "按钮1" }, { "pagePath": "pages/index2", "iconPath": "/image/icon_API.png", "selectedIconPath": "/image/icon_API_HL.png", "text": "按钮2" }, { "pagePath": "pages/index3", "iconPath": "/image/icon_component.png", "selectedIconPath": "/image/icon_component_HL.png", "text": "按钮3" }, ] }else if (type === '1'){ tabData.tabBar.list=[{ "pagePath": "pages/index4", "iconPath": "/image/icon_API.png", "selectedIconPath": "/image/icon_API_HL.png", "text": "按钮4" }, { "pagePath": "pages/index5", "iconPath": "/image/icon_component.png", "selectedIconPath": "/image/icon_component_HL.png", "text": "按钮5" }, { "pagePath": "pages/index6", "iconPath": "/image/icon_API.png", "selectedIconPath": "/image/icon_API_HL.png", "text": "按钮6" }, { "pagePath": "pages/index7", "iconPath": "/image/icon_API.png", "selectedIconPath": "/image/icon_API_HL.png", "text": "按钮7" }] } updateTab(that); } // 更新底部高亮 const updateIndex = (that, index) => { tabData.tabIndex = index; updateTab(that); } // 更新Tab状态 const updateTab = (that) => { if (typeof that.getTabBar === 'function' && that.getTabBar()) { that.getTabBar().setData(tabData); } } // 将可调用的方法抛出让外面调用 module.exports = { updateRole, updateTab, updateIndex,tabBar:tabData.tabBar.list }