uni-app根据权限显示不同的tabBar_uniapp小程序不同角色登录展示不同的tabbar

1、将pages.json中的tabBar的list设置为空数组,即不再使用默认系统自带的tabBar组件。

2、创建tabBar.vue组件,组件内的代码内容如下。

<template>
	<view class="tab-bar">
		<view v-for="(item,index) in list" :key="index" class="tab-bar-item" @click="switchTab(item, index)">
			<image class="tab_img" :src="currentIndex == index ? item.selectedIconPath : item.iconPath"></image>
			<view class="tab_text" :style="{color: currentIndex == index ? selectedColor : color}">{{item.text}}</view>
		</view>
	</view>
</template>
 
<script>
	export default {
		props: {
			selectedIndex: { // 当前选中的tab index
				default: 0
			},
		},
		data() {
			return {
				color: "#666666",
				selectedColor: "#f0c786",
				list: [{
						"pagePath": "/pages/index/home/index",
						"text": "首页",
						"iconPath": "/static/tabbar/tab_home.png",
						"selectedIconPath": "/static/tabbar/tab_home_sel.png"
					}, {
						"pagePath": "/pages/index/type",
						"text": "货品",
						"iconPath": "/static/tabbar/tab_type.png",
						"selectedIconPath": "/static/tabbar/tab_type_sel.png"
					}, {
						"pagePath": "/pages/index/myself/index",
						"text": "我的",
						"iconPath": "/static/tabbar/tab_my.png",
						"selectedIconPath": "/static/tabbar/tab_my_sel.png"
				}],
				currentIndex: 0,
			}
		},
		created() {
			this.currentIndex = this.selectedIndex;
			if (uni.getStorageSync('login7') == 1) {
				this.list.unshift({
					"pagePath": "/pages/index/cart",
					"text": "收银",
					"iconPath": "/static/tabbar/tab_cart.png",
					"selectedIconPath": "/static/tabbar/tab_cart_sel.png"
				}, {
					"pagePath": "/pages/index/vip",
					"text": "会员",
					"iconPath": "/static/tabbar/tab_vip.png",
					"selectedIconPath": "/static/tabbar/tab_vip_sel.png"
				})
			} else {
				this.list = [{
					"pagePath": "/pages/index/home/index",
					"text": "首页",
					"iconPath": "/static/tabbar/tab_home.png",
					"selectedIconPath": "/static/tabbar/tab_home_sel.png"
				}, {
					"pagePath": "/pages/index/type",
					"text": "货品",
					"iconPath": "/static/tabbar/tab_type.png",
					"selectedIconPath": "/static/tabbar/tab_type_sel.png"
				}, {
					"pagePath": "/pages/index/myself/index",
					"text": "我的",
					"iconPath": "/static/tabbar/tab_my.png",
					"selectedIconPath": "/static/tabbar/tab_my_sel.png"
				}]
			}
		},
		methods: {
			switchTab(item, index) {
				this.currentIndex = index;
				let url = item.pagePath;
				uni.redirectTo({
					url: url
				})
			}
		}
	}
</script>
 
<style lang="scss">
	.tab-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		background: white;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-bottom: env(safe-area-inset-bottom); // 适配iphoneX的底部
		z-index: 999;
 
		.tab-bar-item {
			flex: 1;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
 
			.tab_img {
				width: 37rpx;
				height: 41rpx;
			}
 
			.tab_text {
				font-size: 20rpx;
				margin-top: 9rpx;
			}
		}
	}
</style>

3、在main.js文件中将自定义的tabBar定义为全局组件。

import tabBar from "components/tabBar/tabBar.vue"
Vue.component('tabBar',tabBar)

4、在每一个原本将要设置为tabBar的子页面添加我们自定义的tabBar组件。

5、登录页面中成功登录以后根据相关字段控制切换相关逻辑。