uni-app 实现根据用户不同角色显示不同的tabBar_u-tabbar

在网上大量百度之后,好多都走不通,自己总结了一下!!!

我的方法原理:  相当于封装一个公共组件,需要用的地方就调用,(把自带的tabBar隐藏了就好了),

样子都一样的,无非就是数据不一样,千万别想太复杂了

 

创建 组件 tabBar,

<template>
	<view>
		<view class="tabBar_css">
			<u-tabbar 
			:value="currentPagePath"
			:fixed="true" 
			:placeholder="true"
			:safeAreaInsetBottom="true"
			>
				<u-tabbar-item 
				v-for="(item,index) in tabBerList" 
				:key="index" 
				:text="item.text" 
				:icon="item.iconPath"
				:name="item.pagePath" 
				@click="click_page"
				>
				</u-tabbar-item>
				
			</u-tabbar>
		</view>
	</view>
</template>
 
<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
 
			};
		},
		props: {
			currentPagePath: String,
		},
		computed: {
			...mapGetters(['tabBerList'])
		},
		methods: {
			click_page(arg) {
				console.log('arg',arg);
				let page = '/' + arg
				uni.switchTab({
					url: page,
					success: function(res) {
						console.log(res);
						console.log('succcess');
					},
					fail: function(res) {
						console.log('fail');
						console.log(res);
					}
				})
			}
		}
	}
</script>
 
<style lang="scss">
	.tabBar_css {
		position: fixed;
		bottom: 0;
		background-color: red;
		z-index: 9999;
		width: 100%;
	}
</style>

创建组件xiaoz.vue,根据权限(角色)调用不同的数据

<template>
	<view class="content">
		<view v-if="ccc=='0'">
			<u-tabbar
				:value="value1"
				@change="change1"
				:fixed="false"
				:placeholder="false"
				:safeAreaInsetBottom="false"
			>
					<u-tabbar-item v-for="(item,index) in tabBerList1" ref="div1"  :text="item.text" :icon="bbb == index? item.selectedIconPath : item.iconPath" @click="click1(index,item.pagePath)" ></u-tabbar-item>
			</u-tabbar>
		</view>
		<view v-if="ccc=='1'">
			<u-tabbar
				:value="value1"
				@change="change1"
			>
				<!-- :fixed="false"
				:placeholder="false"
				:safeAreaInsetBottom="false" -->
			<u-tabbar-item v-for="(item,index) in tabBerList0"   :text="item.text" :icon="bbb == index? item.selectedIconPath : item.iconPath" @click="click1(index,item.pagePath)" ></u-tabbar-item>
			</u-tabbar>
			
		</view>
		
		
	</view>
	<!-- 111 -->
</template>
 
<script>
	import { mapGetters } from 'vuex'
	export default {
		data() {
			return {
				// borderTop: false,
				// inactiveColor: '#909399',
				// activeColor: '#5098FF',
				value1:"",
				ccc:uni.getStorageSync('id'),
				bbb:uni.getStorageSync('xx')
			}
		},
		onShow() {
			//隐藏官方的tabBar
			
		},
	
		methods:{
			click1(a,b){
				// console.log('a',a);
				uni.setStorageSync('xx',a)
				// console.log('bbb',this.bbb);
				uni.switchTab({
					url:"/"+b,
				})
				// if(this.ccc=='0'){
				// 	uni.switchTab({
				// 		url:"/"+b,
				// 	})
				// }else{
				// 	uni.redirectTo({
				// 		url:"/"+b,
				// 	})
				// }
			},
			change1(a,b){
				// this.bbb=a
				// console.log(a,b);
			}
		},
		computed: {
			...mapGetters([
				'tabBerList0',
				'tabBerList1'
				// 'midBtn'
			])
		}
	}
</script>
 
<style scoped lang="scss">
.content{
	position: fixed;
	bottom: 0rpx;
	width:100%
	}
</style>

下面的就是创建个vuex,放进去了3组数据(因为有3个角色),网上的是真麻烦啊(我也是抄的)!!!

 

tabBer.js

import tabBer from '@/untils/tabBar.js'
 
// tabBar文件为我们创建的tabBer对象数组
 
// 判断用户tabBer类别
// 0 冻结
// 1 普通用户
// 2 教师
// 3 管理员
 
// 逻辑判断处理
// let xx=uni.getStorageSync('id')
// let type = xx==='2' ? 'schList' : xx==='1' ? 'tchList' : 'stuList' 
 
// // let type='schList'
//  console.log(xx);
//  console.log(type);
 
// midBtn 为设置tabBer中间的凸起，false为不凸起
const state = {
	// list: tabBer[type],
	list1: tabBer['schList'],
	list0: tabBer['stuList'],
	data:0
	// midBtn: type === 'stuList' ? false : true
}
export default {
	namespaced: true,
	state
}

getters.js

const getters = {
	tabBerList1: state => state.tabBer.list1,
	tabBerList0: state => state.tabBer.list0,
	data:state=>state.tabBer.data
	// midBtn: state => state.tabBer.midBtn
}
 
export default getters

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import tabBer from './modules/tabBer'
import getters from './getters'
 
Vue.use(Vuex)
 
const store = new Vuex.Store({
	modules: {
		tabBer
	},
	getters
})
 
export default store

 untils文件  tabBar.js

const stuList = [
 {
 	pagePath:"pages/gysshow/gysshow",
 	iconPath: "../../static/imgs/tab1.png",
 	selectedIconPath: "../../static/imgs/tab2.png",
 	text: "首页",
	
 },
 {
 	pagePath:"pages/xxshow/xxshow",
 	iconPath: "../../static/imgs/tab3.png",
 	selectedIconPath: "../../static/imgs/tab4.png",
 	text: "品类",
	
 },
 {
 	pagePath:"pages/my1/my1",
 	iconPath: "../../static/imgs/tab5.png",
 	selectedIconPath: "../../static/imgs/tab6.png",
 	text: "我的",
	
 }
];
 
const schList = [
 {
 	pagePath:"pages/index/index",
 	iconPath: "../../static/imgs/tab1.png",
 	selectedIconPath: "../../static/imgs/tab2.png",
 	text: "首页",
 	
 },
 {
 	pagePath:"pages/health/health",
 	iconPath: "../../static/imgs/tab3.png",
 	selectedIconPath: "../../static/imgs/tab4.png",
 	text: "品类",
 	
 },
 {
 	pagePath:"pages/my/my",
 	iconPath: "../../static/imgs/tab5.png",
 	selectedIconPath: "../../static/imgs/tab6.png",
 	text: "我的",
 	
 }
];
export default {
  stuList,
  schList
};

pages.json 里面tabBar 配置

微信的tabBar最多5个,所以不能折磨写, 但其他的好像能折磨用(原因是因为这样用可以解决闪烁问题)

onShow: function() {
			// console.log(this)
			uni.hideTabBar()
		},

切换tabBar时,需要把这个隐藏了,不然会报错