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 ***monBar = [{
		name: 0,
		text: '首页',
		icon: 'home',
		path: '/pages/index/index'
	},
	{
		name: 1,
		text: '订单',
		icon: 'order',
		path: '/pages/orders/orders'
	},
	{
		name: 2,
		text: '消息',
		icon: 'chat',
		path: '/pages/chat/chat'
	},
	{
		name: 3,
		text: '我的',
		icon: 'a***ount',
		path: '/pages/me/me'
	}
]
// 跑腿员展示的页面
const runnerBar = [{
		name: 0,
		text: '首页',
		icon: 'home',
		path: '/pages/index/index'
	},
	{
		name: 1,
		text: '接单',
		icon: 'car',
		path: '/pages/RecOrder/RecOrder'
	},
	{
		name: 2,
		text: '订单',
		icon: 'order',
		path: '/pages/orders/orders'
	},
	{
		name: 3,
		text: '消息',
		icon: 'chat',
		path: '/pages/chat/chat'
	},
	{
		name: 4,
		text: '我的',
		icon: 'a***ount',
		path: '/pages/me/me'
	}
]

export {
	***monBar,
	runnerBar
}

使用Vuex和本地缓存来存储tabbar数据

	state: {
		// 存储底部导航栏tabbar数据
		activeTabbar: uni.getStorageSync('activeTabbar') || [],
		// 选中的tabbar tabbar的name值
		selectTab: uni.getStorageSync('selectTab') || 0,
	},
	mutations: {
		// 将底部导航栏tabbar数据存储到本地缓存中
		SET_TABBAR: (state, payload) => {
			state.activeTabbar = payload;
			uni.setStorageSync('activeTabbar', payload);
		},
		// 将当前选中的导航栏name值存储到本地缓存中
		SET_CURRENT_TAB: (state, val) => {
			state.selectTab = val;
			uni.setStorageSync('selectTab', val);
		}
	}，
	actions: {
	// 设置当前选中tabbar
		setCurrentTab({
			***mit
		}, val) {
			***mit('SET_CURRENT_TAB', val);
		},
		// 设置底部tabbr
		SetTabbar({
			***mit
		}, payload) {
			***mit('SET_TABBAR', payload);
		}
	}

在每个tabbar页都添加以下代码，获取tabbar相关数据

export default {
 		data() {
 			return {
 				// tabber内容
 				tabbars: this.$store.state.user.activeTabbar,
 				// 选中的tabbar tabbar的name值
 				selectTab: this.$store.state.user.selectTab
 			}
 		},
 		methods: {
 			// 点击当前clickTabbar name值为当前点击tabbar的name值
 			clickTabbar(name, path) {
 				this.$store.dispatch('setCurrentTab', name);
 				uni.reLaunch({path});
 			}
 		}
 		}

大家根据自己代码修改一下获取store中的state数据，我是因为写在了自己的user模块中了。
注意： 在每个tabbar页面加上以上js代码的内容和开头的HTML代码，使得能够获取到tabbar数据和使UI生效

删除pages.json中tabBar的内容

删除或注释pages.json中tabBar部分的内容，使原生tabbar失效

"tabBar": {
		"backgroundColor": "#fff",
		"selectedColor": "#006eff",
		"color": "#666",
		// "list": [{
		// 		"iconPath": "/static/icons/home.png",
		// 		"selectedIconPath": "static/icons/home-active.png",
		// 		"text": "首页",
		// 		"pagePath": "pages/index/index"
		// 	},
		// 	{
		// 		"iconPath": "/static/icons/a***ent_order.png",
		// 		"selectedIconPath": "/static/icons/a***ent_order_active.png",
		// 		"text": "接单",
		// 		"pagePath": "pages/RecOrder/RecOrder"
		// 	},
		// 	{
		// 		"iconPath": "/static/icons/orders.png",
		// 		"selectedIconPath": "static/icons/orders-active.png",
		// 		"text": "订单",
		// 		"pagePath": "pages/orders/orders"
		// 	},
		// 	{
		// 		"iconPath": "/static/icons/me.png",
		// 		"selectedIconPath": "static/icons/me-active.png",
		// 		"text": "我的",
		// 		"pagePath": "pages/me/me"
		// 	}
		// ]
	}

选择在合适的地方设置tabBar值

大家根据自己的业务需求，在合适的地方调用Vuex中的action方法给tabBar数据设置值。我这里选择在登录成成功的时候。

		// 导入tabBar列表
		import {
		runnerBar,
		***monBar
	} from '../../utils/tabbar';
		
		// 登录成功后，处理函数
		loginSu***ess(result) {
				// 设置用户信息
				this.$store.dispatch('GetInfo').then(res => {
					// 根据角色设置显示的tabbar
					const roles = this.$store.state.user.roles;
					if (roles.includes('runner') || roles.includes('admin')) {
					// 将tabBar列表数据传过去
						this.$store.dispatch('SetTabbar', runnerBar);
					} else {
						this.$store.dispatch("SetTabbar", ***monBar);
					}
					this.$tab.reLaunch('/pages/index/index');

				})
			}

完结撒花！

这个还是很简单的，就是有不足的地方，第一次点击底部导航栏，会闪一闪，之后缓存了就没事了，希望有大神能给出解决意见。有什么不足的也请大家多多指导，我是小白！