uniapp自定义tabbar_uniapp 自定义tabbar

在开发微信小程序时，由于uniapp官方的tabbar不满足根据权限区分tab的要求，则自定义了tabbar，出现两个问题；

问题一：自定义的tabbar在切换的时候tabbar会闪烁，尤其在用户手机性能不太好的手机型号上闪烁尤其明显；

问题二：自定义的tabbar使用uni.redirectTo切换页面每次都会触发页面的onLoad，页面数据得不到缓存，消耗性能。

所以将官方的tabbar和自定义的tabbar结合使用，

（1）在tabbar页面使用uni.hideTabBar({})将官方的tabbar页面隐藏

（2）封装自定义tabbar组件，根据权限分配tab

1. 在pages.json中把tabbar配置好，只需要配置页面路径即可

"tabBar": {
		"color": "#909399",
		"selectedColor": "#303133",
		"backgroundColor": "#FFFFFF",
		"borderStyle": "black",
		"list": [
			{
				"pagePath": "pages/index/index",
				"text":""
			},
			{
				"pagePath": "pages/workOrder/workOrderList",
				"text":""
			},
			{
				"pagePath": "pages/my/my",
				"text":""
			}
		]
		 
	},

2. 封装tabbar组件，tabbar.vue，使用uni.switchTab({})路由切换tabBar页面

<template>
	<cover-view class="tabbar" :style="{'padding-bottom': paddingBottomHeight + 'rpx'}">
		<cover-view 
		class="tabbar-item"
		v-for="(item,index) in tabNav"
		:key="index"
		@click="tabbarChange(item.pagePath,index)"
		>
			<cover-image class="item-img" :src="item.selectedIconPath" v-if="current == index"></cover-image>
			<cover-image class="item-img" :src="item.iconPath" v-else></cover-image>
			<cover-view 
			class="item-text" 
			:class="{'tabbarActive': current == index}"
			 style="color: #A3A3A3;font-size: 20rpx"
			v-if="item.text">{{item.text}}</cover-view>
		</cover-view>
	</cover-view>
</template>
 
<script>
	export default {
		props: {
			current: String,
		},
		data() {
			return {
				tabNav: [],
				paddingBottomHeight: 0 //iPhonex以上手机底部适配高度
			}
		},
		created() {
			//适配iPhonex以上的底部
			uni.getSystemInfo({
				success: (res) => {
					let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];
					// console.log('iphone',res)
					for (let i=0;i<=model.length;i++) {
						if(res.model.indexOf(model[i]) != -1 && res.model.indexOf('iPhone') != -1) {
							this.paddingBottomHeight = 50
                             //向父组件传递tabbar高度
							this.$emit('tabbarHeight',150)
							return
						}else {
							this.$emit('tabbarHeight',100)
						}
					}
				}
			})
            // 根据权限配置对应tab导航
			let list1 = [{
					pagePath: "/pages/index/index",
					iconPath: "/static/nav/home.png",
					selectedIconPath: "/static/nav/home_select.png",
					text: "首页"
				},{
					pagePath: "/pages/workOrder/workOrderList",
					iconPath: "/static/nav/work_order.png",
					selectedIconPath: "/static/nav/work_order_select.png",
					text: "工单"
				},{
					pagePath: "/pages/my/my",
					iconPath: "/static/nav/my.png",
					selectedIconPath: "/static/nav/my_select.png",
					text: "我的"  
				},]
			let list2 = [{
					pagePath: "/pages/index/index",
					iconPath: "/static/nav/home.png",
					selectedIconPath: "/static/nav/home_select.png",
					text: "首页"
				},{
					pagePath: "/pages/my/my",
					iconPath: "/static/nav/my.png",
					selectedIconPath: "/static/nav/my_select.png",
					text: "我的"  
				},]
			if(this.$store.state.role == '1') {
				this.tabNav = list1
			}else {
				this.tabNav = list2
			}
		},
		methods: {
            //跳转切换tab
			tabbarChange(path) {
				uni.switchTab({
					url: path
				})
			}
		} 
	}
</script>
 
<style scoped lang="scss">
	.tabbarActive{
	    color: #000 !important;
	}
	.tabbar{
	    position: fixed;
	    bottom: 0;
	    left: 0;
	    display: flex;
	    justify-content: space-around;
	    align-items: center;
	    width: 100%;
	    height: 100rpx;
	    background-color: #ffffff;
		border-top: 1px solid #e5eaea;
	}
	.tabbar-item{
		flex: 1;
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    justify-content: center;
	    // height: 100rpx;
	}
	.item-img{
	    margin-bottom: 4rpx;
	    width: 46rpx;
	    height: 46rpx;
	}
	.item-name{
	    font-size: 26rpx !important;
	    color: #A3A3A3 !important;
	}
</style>

3. 在tabbar页面引入组件，隐藏官方tabbar，

onShow() {
			uni.hideTabBar({
				animation: false
			})
		},