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);
}
发表评论