uniapp 根据不同角色实现动态底部TabBar导航栏

制衡_

已于 2024-02-19 10:13:24 修改

阅读量1w

点赞数 8

文章标签： uni-app 微信小程序安卓 uniapp

于 2024-02-19 09:47:53 首次发布

本文链接：https://blog.csdn.net/qq_32073593/article/details/136161955

版权

本文介绍了如何在UniApp项目中使用uView-UI框架实现根据不同用户角色动态配置TabBar的功能，包括配置page.json、创建自定义tabBar文件、集成Vuex进行状态管理以及在登录验证后根据角色切换TabBar内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

在UniApp的开发过程中，为了针对不同角色用户登录后的个性化需求，本文集成了uView-UI框架的TabBar组件。通过动态权限配置机制，能够根据用户的角色信息灵活地调整TabBar的属性，从而实现个性化的TabBar界面展示，以满足不同用户群体的特定需求。

最终效果

用户角色：
在这里插入图片描述

售后客服：
在这里插入图片描述

一、实现步骤

1.配置page.json中的tabBar属性

代码如下：

只需配置pagePath，微信小程序底部导航栏最多只能显示五个。

在这里插入图片描述

2.创建自定义tabBar文件

位置示例如下：

在这里插入图片描述

具体代码如下：

在tabBar.js文件中定义的list数组的顺序决定了tabBar上按钮的显示顺序。

// 普通用户展示的页面
const publicBar = [{
   
		"pagePath": "/pages/sys/home/index",
		"text": "首页",
		"iconPath": "/static/aidex/tabbar/home_1.png",
		"selectedIconPath": "/static/aidex/tabbar/home_2.png"
	},
	{
   
		"pagePath": "/pages/sys/msg/index",
		"text": "消息",
		"iconPath": "/static/aidex/tabbar/msg_1.png",
		"selectedIconPath": "/static/aidex/tabbar/msg_2.png"
	},
	{
   
		"pagePath": "/pages/sys/aftersales/aftersales-order",

最低0.47元/天解锁文章