"tabBar": { "color": "#BEC0C3", "selectedColor": "#00A29C", "borderStyle": "#EEEEEE", "backgroundColor": "#ffffff", "list": [{ "pagePath": "pages/tabBar/devicePage", "iconPath": "static/image/tabbar/device.png", "selectedIconPath": "static/image/tabbar/device_active.png", "text": "设备" }, { "pagePath": "pages/tabBar/voicePage", "iconPath": "static/image/tabbar/device.png", "selectedIconPath": "static/image/tabbar/device_active.png", "text": "语音" }, { "pagePath": "pages/tabBar/warnPage", "iconPath": "static/image/tabbar/warning.png", "selectedIconPath": "static/image/tabbar/warning_active.png", "text": "预警" }, { "pagePath": "pages/tabBar/locationPage", "iconPath": "static/image/tabbar/position.png", "selectedIconPath": "static/image/tabbar/position_active.png", "text": "位置" }, { "pagePath": "pages/tabBar/fencePage", "iconPath": "static/image/tabbar/fence.png", "selectedIconPath": "static/image/tabbar/fence_active.png", "text": "围栏" }, { "pagePath": "pages/tabBar/myPage", "iconPath": "static/image/tabbar/my.png", "selectedIconPath": "static/image/tabbar/my_active.png", "text": "我的" } ] },
2、app.vue 的globalData里加入reviseTabbarByUserType方法
globalData: { reviseTabbarByUserType: function () { let isAdmin = uni.getStorageSync('isAdmin'); if (isAdmin == 1) { uni.setTabBarItem({ index: 1, visible: false, }) } else { uni.setTabBarItem({ index: 0, visible: false, }) } } },
3、涉及到的所有tabbar界面在onshow里调用reviseTabbarByUserType方法
onShow() { getApp().globalData.reviseTabbarByUserType(); },
###补充reviseTabbarByUserType方法解释
在uniapp中,reviseTabbarByUserType
这个方法是用来根据用户类型修改TabBar的展示内容
reviseTabbarByUserType(userType) { const tabbar = { list: [], }; // 根据用户类型设置TabBar列表 if (userType === 'admin') { tabbar.list = [ { pagePath: '/pages/home/home', text: '首页', }, { pagePath: '/pages/admin/admin', text: '管理', }, ]; } else { tabbar.list = [ { pagePath: '/pages/home/home', text: '首页', }, { pagePath: '/pages/user/user', text: '我的', }, ]; } // 修改TabBar uni.setTabBarItem(tabbar); }