uni-app之tabBar的自己配置

Posted 2021-03-21 陌凌雪

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、页面引入。