1、将所有需要的tabbar配置在pages.json里
"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);
}