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);   }

     

相关内容

热门资讯

实操分享!微扑克系统透明挂透视... 自定义新版系统规律,只需要输入自己想要的开挂功能,一键便可以生成出专用辅助器,不管你是想分享给你好友...
分享给玩家!微扑克wpk插件透... 分享给玩家!微扑克wpk插件透明挂脚本!微扑克wpk插件辅助软件(2023已更新)(哔哩哔哩);1、...
发现玩家!wepoke黑科技透... 自定义新版系统规律,只需要输入自己想要的开挂功能,一键便可以生成出专用辅助器,不管你是想分享给你好友...
【人工智能】猫狗识别 猫狗识别实验背景数据集介绍我们使用CIFAR10数据集。CIFAR10数据集包含60,000张32x...
【AIGC】全球首位AI软件工... 文章目录强烈推荐推荐一:人工智能网站推荐二:人工智能工具Devin的诞生...
手把手教你打造自己的 AI 虚... 零、写在前面一、 准备环境二、配置软件环境2.1 OBS 安装2.2. VTube Studio 安...
新版2024教程!微扑克德州透... 新版2024教程!微扑克德州透明挂脚本!微扑克德州辅助技巧(2024已更新)(哔哩哔哩);一、AI软...
Windows作业三:使用C#... 目录一、引言和项目介绍二、前期准备工作1、准备百度AI接口2、SDK下载3、下载Nuget包AFor...
AI大模型探索之路-训练篇24... 系列篇章💥AI大模型探索之路-训练篇1:大语言模型微调基础认知AI大模...
交流学习经验!微扑克德州辅助透... 自定义新版系统规律,只需要输入自己想要的开挂功能,一键便可以生成出专用辅助器,不管你是想分享给你好友...