uni-app之tabBar的自己配置

1.因為產品相關的的權限，需要配置不同的導航，這時候需要自定義導航。分離出來的就是一個小的組件。（tabBar.vue）

此處暫時用的html插入的代碼，能粘貼到vue文件即可。

<template>
	<view class="tabBar">
		<view v-for="(item,index) in tabBar" :key="item.url" class="tabbar_item" :class="{'active':item.url == currentPage}"
		 @click="navTo(item,index)">
			<image v-if="item.url == currentPage" :src="item.imgClick" mode=""></image>
			<image v-else :src="item.imgNormal" mode=""></image>
			<view class="text">{{item.text}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			currentPage: {
				type: String,
				default: 'index'
			}
		},
		data() {
			return {
				tabBar: [{
						url: 'information',
						text: '消息',
					    imgNormal:'../../static/images/information.png',
						imgClick:'../../static/images/active/information_active.png' 
					},
					{
						url: 'officialPartner',
						text: '合作商',
					    imgNormal:'../../static/images/officialPartner.png',
						imgClick:'../../static/images/active/offPartner_active.png'
					},
					{
						url: 'stock',
						text: '庫存',
					    imgNormal:'../../static/images/stock.png',
						imgClick:'../../static/images/active/stock_active.png' 
					}, {
						url: 'product',
						text: '產品',
						imgNormal:'../../static/images/product.png',
						imgClick:'../../static/images/active/product_active.png' 
					}, {
						url: 'mine',
						text: '我的',
						imgNormal:'../../static/images/mine.png',
						imgClick:'../../static/images/active/mine_active.png'
					}
				],
				level:''
				
			};
		},mounted(){
			let userlevel = uni.getStorageSync('level');
			/* console.log(userlevel); */
			let _this = this;
			if (userlevel== 1) {
				_this.tabBar.splice(3, 1);
			} else {
				_this.tabBar.splice(1,1);
				_this.tabBar.splice(1,1);
			}
		},
		created() {
			uni.hideTabBar({})
		},
		computed: {

		},
		methods: {
			navTo(item,index) {
				let _this = this;
				if (item.url !== _this.currentPage) {
					var isUrl = `/pages/${item.url}/${item.url}`
					const that = this
					uni.switchTab({
						url: isUrl
					})
				} else {
					/* this.$parent.toTop() */
				}
			}
		}
	}
</script>

　　

<style lang="scss" scoped>
	//導航欄設置
	$isRadius:20upx; //左上右上圓角
	$isWidth:100vw; //導航欄寬度
	$isBorder:1px solid #eeeeee; //邊框 不需要則設為0px
	$isBg:white; //背景
    
	// 選中設置
	$chooseTextColor:#1b60ac; //選中時字體顏色
	$chooseBgColor:white; //選中時背景顏色 transparent為透明

	//未選中設置
	$normalTextColor:#999; //未選中顏色

	.tabBar {
		width: $isWidth;
		height: 100upx;
		position: fixed;
		bottom: 10upx;
		left: 0;
		right: 0;
		margin: 0 auto;
		z-index: 998;
		background-color: $isBg;
		color: $normalTextColor;
		border-left: $isBorder;
		border-top: $isBorder;
		border-right: $isBorder;
		display: flex;
		justify-content: space-around;
		border-top-right-radius: $isRadius;
		border-top-left-radius: $isRadius;
		box-sizing: border-box;
		overflow: hidden;

		.tabbar_item {
			width: 25%;
			font-size: 12px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			&.active {
				/* border-left: $isBorder;
				border-top: $isBorder; */
				background: $chooseBgColor;
				color: $chooseTextColor;
			}
		}

		image {
			width: 36upx;
			height: 36upx;
			margin-left: 5upx;
		}
	}
</style>

2、頁面引入。