uniapp动态配置底部栏tabBar权限菜单，根据业务需求展示不同的菜单_uniapp tabar动态显示三个或者四个菜单

根据业务需求，有时我们需要针对不同角色展示不同的菜单，uniapp默认的菜单配置就不适用了，但是我们可以自己自定义配置菜单栏

步骤如下：

1、page.json问价去掉默认的tabBar配置项；

2、在component目录下，新建一个tabBar.vue组件,这个组件里就是配置动态的底部菜单栏

tabBar.vue代码参考:

<template>
	<view class="uni-tabbar">
		<view class="uni-tabbar__item" v-for="(item,index) in tabbar" :key="index" @tap="changeTab(item)">
			<view class="uni-tabbar__bd">
				<view class="uni-tabbar__icon">
					<image v-if="item.pagePath == pagePath" class="icon-img" mode="aspectFit" :src="item.selectedIconPath"></image>
					<image v-else class="icon-img" mode="aspectFit" :src="item.iconPath"></image>
				</view>
			</view>
			<view class="uni-tabbar__label" :class="{'active': item.pagePath == pagePath}">
				{{item.text}}
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		props: {
			pagePath: String
		},
		data() {
			return {
				page: 'contact',
				showPage: false,
				containerHeight: 400,
				tabbar: [
					//动态切换的菜单，先隐藏，动态插入
					{
						"pagePath": "/pages/user/user",
						"iconPath": "/static/img/user.png",
						"selectedIconPath": "/static/img/user_on.png",
						"text": "我的"
					}
				]
			};
		},
		watch: {
			pagePath: {
				handler(val) {
					console.log('pagePath监听===val', val)
				},
				immediate: true
			}
		},
		mounted() {
			// 根据自己的业务需求判断条件为true，替换即可
			if (true) {
				this.tabbar.splice(0, 0, {
					"pagePath": "/pages/receipt/receiptList",
					"iconPath": "/static/img/receipt.png",
					"selectedIconPath": "/static/img/receipt_on.png",
					"text": "收货"
				}, {
					"pagePath": "/pages/send/sendList",
					"iconPath": "/static/img/n_send.png",
					"selectedIconPath": "/static/img/n_send_on.png",
					"text": "发货"
				}, {
					"pagePath": "/pages/appliance/appliance",
					"iconPath": "/static/apply.png",
					"selectedIconPath": "/static/apply_on.png",
					"text": "应用"
				})
			}
		},
		methods: {
			changeTab(item) {
				this.page = item.pagePath;
				// 使用reLaunch关闭所有的页面，打开新的栏目页面
				uni.reLaunch({
					url: this.page
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.uni-tabbar {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 999;
		width: 100%;
		display: flex;
		justify-content: space-around;
		height: 98upx;
		padding: 16upx 0;
		box-sizing: border-box;
		border-top: solid 1upx #ccc;
		background-color: #fff;
		box-shadow: 0px 0px 17upx 1upx rgba(206, 206, 206, 0.32);

		.uni-tabbar__item {
			display: block;
			line-height: 24upx;
			font-size: 20upx;
			text-align: center;
			width: 25%;
		}

		.uni-tabbar__icon {
			height: 24px;
			line-height: 24px;
			text-align: center;
		}

		.icon {
			display: inline-block;
		}

		.uni-tabbar__label {
			line-height: 24upx;
			font-size: 24upx;
			color: #999;

			&.active {
				color: #1ca6ec;
			}
		}

		.icon-img {
			height: 24px;
			width: 24px;
		}
	}
</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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130

3、全局引入tabBar.vue组件，找到main.js文件，加入一下代码：
import tabBar from “@/components/tabBar.vue”
Vue.component(‘tabBar’, tabBar)

4、在tabBar页面加入
如：/pages/receipt/receiptList 页面，引入：

	<template>
		<view>
			<view class="uni-p-b-98">这里是内容块</view>
			<tabBar :pagePath="'/pages/receipt/receiptList'"></tabBar>
		</view>
	</template>
<!-- 		其中uni-p-b-98是公共样式类名，表示padding-bottom: 98upx; 
		最底部引入自定义组件，pagePath对应当前显示的页面路径，目的是为了让底部栏高亮 -->
1
2
3
4
5
6
7
8