uniapp 小程序中使用 uview-plus 实现不同角色动态显示底部导航栏 tabbar

uniapp 小程序中使用 uview-plus 实现不同角色动态显示底部导航栏 tabbar

在使用uniapp开发小程序项目中，常需要根据角色的不同动态显示底部导航栏的内容。下面我将使用uview-plus中的tabbar组件来实现这个功能。
需要注意的是uview-plus是针对vue3项目使用的，所以下面的例子不适用vue2的项目，大家有需求可以去看uview。

添加网页代码

<up-tabbar :value="selectTab" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true"
 			activeColor="#006eff">
 			<up-tabbar-item v-for="item in tabbars" :text="item.text" :icon="item.icon"
 				@click="clickTabbar(item.name,item.path)" :key="item.name"></up-tabbar-item>
 		</up-tabbar>

up-tabbar属性讲解
value：当前匹配项的name值；value的值对应哪个up-tabbar-item的name值，表示哪个up-tabbar-item被选中状态。
fixed：导航栏是否固定在底部。
placeholder：fixed定位固定在底部时，是否生成一个等高元素防止塌陷。
safeAreaInsetBottom：是否为苹果X留出底部安全距离。
activeColor：选中标签颜色。

up-tabbar-item属性讲解
text：描述文本，即tabbar的名称。
icon：tabbar显示的图标。

更多详细的属性及其作用可以去uview-plus官网一探究竟。

由此可知，显示一个自定义的图标，需要name（用于显示当前tab）、text、icon、path（跳转路径）这些属性。
当点击某一个tab时，通过传入的name值和path路径就能改变选中状态，跳转到下一个tab页面去。

不同角色展示的tabbar

创建一个用于存储不同角色展示的tabber数据的tabbar.js文件。以下是我的项目中两种不同角色需要展示的tabbar，大家根据自己的项目需求调整。

// 普通用户展示的页面
const commonBar = [{
   
   
		name: 0,
		text: '首页',
		icon: 'home',
		path: '/pages/index/index'
	},
	{
   
   
		name: 1,
		text: '订单',