手拉手带你实现基于Uniapp和uView，根据权限动态的修改底部菜单tabbar_uview tabbar

概述

点关注，不迷路！先点赞，后观看，养成阅读好习惯！你长得这么好看，点个赞不过分吧~

在开发项目时，无论是PC端的项目还是移动端的项目，经常会遇到根据用户的权限显示不同的功能模块，例如，超级管理员可以查看所有功能与模块，而普通用户只能看到部分模块。
那么在uniapp中如何根据权限实现动态的切换底部菜单呢？就类似于下面这样：
普通用户看到的界面

超级管理员看到的界面

步骤

废话不多说，让我们直接开始吧！

uView的安装和配置

这点官方已经说得非常清楚了，建议大家采用npm的安装方式。这里挂个链接 – uView的安装和配置

创建tabbar对应的页面

在pages里面创建页面，在pages.json文件中注册。如图：

配置page.json中的tabBar属性

需要注意的是，这里仅需配置tabBar中list属性中各页面的路径pagePath属性，如下图所示：
需要注意的是pagePath的最前面不要加 /

创建自定义的tabbar文件

其实就是按照uview官方文档tabbar组件绑定的参数进行配置，这里是说明

{
	// 非凸起按钮未激活的图标，可以是uView内置图标名或自定义扩展图标库的图标
	// 或者png图标的【绝对路径】，建议尺寸为80px * 80px
	// 如果是中间凸起的按钮，只能使用图片，且建议为120px * 120px的png图片
	iconPath: "home",
	// 激活(选中)的图标，同上
	selectedIconPath: "home-fill",
	// 显示的提示文字
	text: '首页',
	// 红色角标显示的数字，如果需要移除角标，配置此参数为0即可
	count: 2,
	// 如果配置此值为true，那么角标将会以红点的形式显示
	isDot: true,
	// 如果使用自定义扩展的图标库字体，需配置此值为true
	// 自定义字体图标库教程：https://www.uviewui.com/guide/customIcon.html
	customIcon: false,
	// 如果是凸起按钮项，需配置此值为true
	midButton: false,
	// 点击某一个item时，跳转的路径，此路径必须是pagees.json中tabBar字段中定义的路径
	pagePath: '', // 1.5.6新增，路径需要以"/"开头
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

配置的文件 tabbar.js。需要注意的是pagePath的最前面要加 /

const userTabbar = [ 
	{
		"pagePath": "/pages/home/home", 
		"text": "主页"
	},
	{
		"pagePath": "/pages/profile/profile", 
		"text": "个人中心"
	}
]

const adminTabbar = [
	{
		"pagePath": "/pages/home/home", 
		"text": "主页"
	},
	{
		"pagePath": "/pages/message/message", 
		"text": "信息"
	},
	{
		"pagePath": "/pages/profile/profile", 
		"text": "个人中心",
	}
]

export { userTabbar, adminTabbar }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

配置Vuex

index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
	state: {
		dynamicTabbar: [] // 动态tabbar
	},
	getters: {
		
	},
	actions: {
		changeTabbar({commit}, payload) {
			commit('updateTabbar', payload)
		}
	},
	mutations: {
		updateTabbar(state, payload) {
			state.dynamicTabbar = payload
		}
	}
})

export default store
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

main.js中引入并挂载

登录页面进行逻辑判断

login.vue

<template>
	<view>
		<button type="primary" @click="loginClick">登录</button>
	</view>
</template>

<script>
	import { userTabbar, adminTabbar } from '../../utils/tabbar.js'
	export default {
		data() {
			return { 
				userRoleId: 1, // 假设0是超级管理员，1是普通用户
			}
		},
		onLoad() {

		},
		methods: {
			loginClick() { 
				if(this.userRoleId === 0) 
					this.$store.dispatch('changeTabbar', adminTabbar)
				else 
					this.$store.dispatch('changeTabbar', userTabbar)
				uni.switchTab({
					url: '/pages/home/home'
				})
			}
		}
	}
</script> 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

在每个tabbar页面引入并使用

结果就和概述里面的一样了

源码

说好了手拉手吗，为了实现小白也能看懂，这里将主要的源代码也贴上，上面写过的就不再写了。

home.vue

<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		
		<u-tabbar 
			:list="tabBarList" 
			:active-color="activeColor"
			:inactive-color="inactiveColor"
			:border-top="borderTop" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '主页',
				tabBarList: this.$store.state.dynamicTabbar,
				borderTop: true,
				inactiveColor: '#909399',
				activeColor: '#5098FF'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

pages.json

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path" : "pages/login/login",
			"style" :                                                                                    
			{
				"navigationBarTitleText": "",
				"enablePullDownRefresh": false
			} 
		},
		{
			"path": "pages/home/home",
			"style": {
				"navigationBarTitleText": "主页",
				"enablePullDownRefresh": false,
				"navigationStyle": "custom"
			}
		}
		,{
			"path" : "pages/message/message",
			"style" :                                                                                    
			{
				"navigationBarTitleText": "信息",
				"enablePullDownRefresh": false,
				"navigationStyle": "custom"
			} 
		}
		,{
			"path" : "pages/profile/profile",
			"style" :                                                                                    
			{
				"navigationBarTitleText": "个人中心",
				"enablePullDownRefresh": false,
				"navigationStyle": "custom"
			} 
		}
  ],
	"tabBar": {
		"color": "#1e1e1e",
		"selectedColor": "#11bb60", 
		"fontSize": "16px",
		"borderStyle": "black",
		"backgroundColor": "#fefefe",
		"list": [
			{
				"pagePath": "pages/home/home" 
				// "text": "主页"
			},
			{
				"pagePath": "pages/message/message" 
				// "text": "信息"
			},
			{
				"pagePath": "pages/profile/profile" 
				// "text": "个人中心"
			}
		]
	},
	"easycom": {
		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
	},
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"uniIdRouter": {}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

项目目录组织

总结

本文我们一同掌握了在uniapp中如何借助uView实现动态tabbar。需要注意的是

• 本文使用的uView版本是1.x版本，并不是2.x，因为2.x的u-tabbar较1.x发生了比较大的变化，按照文中的配置是不行的，这点有不少博客都没有做说明，导致按照2.x的配置结果出不来
• 如果你想采用2.x，使用本文的配置方式会有些问题，tabbar是动态的，但是没内容，具体的我也没细看，不过你应该可以通过自定义tabbar，然后自己进行逻辑实现，可以尝试一下。
• 需要提醒的是虽然本文的u-tabbar组件采用的是1.x版本，但并不意味着你uView的全部组件都要使用1.x版本的，你可以全局安装2.x版本，然后将这一个组件换成1.x的，但是并不是简单的复制过去，相关的东西也要补齐，具体自我尝试一下就知道了。
• 本文的tabbar.js中的不同权限的tabbar是写死的，仅作示例使用，并不符合项目规范。真正在项目中应该是登录时后端根据权限返给你一个包含路由表的数据，然后由你自己动态构建出来，再传给动态的tabbar
• 按照本文的配置，可能会在初次点击tabbar页面时有跳动，我看了其他博客有说将tabbar的图片转成base64的就可以了，具体可以自我尝试一下。