uniapp动态设置tabbar
创始人
2024-12-29 00:07:57
0
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);   }

     

相关内容

热门资讯

专业讨论!德扑之星真破解套路(... 专业讨论!德扑之星真破解套路(辅助挂)软件透明挂(有挂了解)-哔哩哔哩;人气非常高,ai更新快且高清...
每日必看!智星德州菠萝外挂检测... 每日必看!智星德州菠萝外挂检测(辅助挂)软件透明挂(有挂教学)-哔哩哔哩1、玩家可以在智星德州菠萝外...
透视透明挂!轰趴十三水有后台(... 轰趴十三水有后台赢率提升策略‌;透视透明挂!轰趴十三水有后台(辅助挂)软件透明挂(有挂详情)-哔哩哔...
发现玩家!德扑ai助手软件(辅... 发现玩家!德扑ai助手软件(辅助挂)透视辅助(有挂教学)-哔哩哔哩;玩家在德扑ai助手软件中需先进行...
一分钟了解!x-poker辅助... 一分钟了解!x-poker辅助软件(辅助挂)辅助透视(有挂攻略)-哔哩哔哩1、每一步都需要思考,不同...
一分钟揭秘!德州最新辅助器(辅... 一分钟揭秘!德州最新辅助器(辅助挂)透视辅助(有挂攻略)-哔哩哔哩;德州最新辅助器最新版本免费下载安...
玩家攻略推荐!德州辅助(辅助挂... 玩家攻略推荐!德州辅助(辅助挂)辅助透视(有挂了解)-哔哩哔哩是由北京得德州辅助黑科技有限公司精心研...
揭秘真相!pokernow德州... 《揭秘真相!pokernow德州(辅助挂)辅助透视(有挂介绍)-哔哩哔哩》 pokernow德州软件...
五分钟了解!德州之星辅助器(辅... 五分钟了解!德州之星辅助器(辅助挂)辅助透视(有挂透明)-哔哩哔哩1、很好的工具软件,可以解锁游戏的...
推荐一款!pokermaste... 1、推荐一款!pokermaster有外挂(辅助挂)透视辅助(有挂教学)-哔哩哔哩;详细教程。2、p...