【小程序】uview-ui(uni-app)+微信小程序根据权限动态的更改底部tabbar

uni-app动态权限管理：uview-ui实现微信小程序Tabbar

最新推荐文章于 2025-10-08 00:10:38 发布

原创

最新推荐文章于 2025-10-08 00:10:38 发布 · 3.8k 阅读

55 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

本文介绍了如何在uni-app中使用uview-ui结合微信小程序，根据用户权限动态更改底部Tabbar。通过创建不同权限的Tabbar数据、整合到Vuex进行状态管理，实现了权限切换时的平滑过渡，解决了动态设置Tabbar可能导致的白屏问题。

背景

公司要求开发一个小程序，要求三种不同权限的人群都可以使用，使用时根据不同的权限，获取不同的tabbar，以及展示不同的内容。

思路

一开始考虑的是小程序本身的动态设置tabbar方法wx.setTabBarItem，之后百度发现，使用这个方法刷新切换时会短暂白屏，再之后才考虑了使用uview-ui的Tabbar底部导航栏组件。当然，主要功能是百度上寻找的其他人的代码，自己再润色了一番。

最终选择了uni-app的uview-ui（UI框架）+vuex来完成这个功能。其中，vuex主要是用来存储当前的tabbar内容的。

第一步

在utils文件夹下新建一个tabbar.js，来存储不同权限下的底部导航数据。

let tab1 = [{
   
   
		text: "首页",
		pagePath: '/pages/index/index',
		iconPath: "/static/tabbar/index.png",
		selectedIconPath: "/static/tabbar/index_selected.png",

	},
	{
   
   
		text: "订单",
		pagePath: '/pages/order/order',
		iconPath: "/static/tabbar/order.png",
		selectedIconPath: "/static/tabbar/order_selected.png",
	},
	{
   
   
		text: "我的",
		pagePath: '/pages/mine/mine',
		iconPath: "/static/tabbar/mine.png",
		selectedIconPath: "/static/tabbar/mine_selected.png",
	}
]

let tab2 = [{
   
   
		text: "首页",
		pagePath: '/pages/index/index',
		iconPath: "/static/tabbar/index.png",
		selectedIconPath: "/static/tabbar/index_selected.png",
	},
	{
   
   
		text: "培训",
		pagePath: '/pages/train/train',
		iconPath: "/static/tabbar/train.png",
		selectedIconPath: "/static/tabbar/train_selected.png",
	},
	{
   
   
		text: "订单",
		pagePath: '/pages/order/order',
		iconPath: "/static/tabbar/order.png",
		selectedIconPath: "/static/tabbar/order_selected.png",
	},
	{
   
   
		text: