uni-app自定义tabbar

uni-app自定义tabbar

为什么要自定义tabbar呢,虽然说直接在page.json里面直接配置性能可能更好点,但是有时候满足不了我们的需求,比如说,需要鉴权的时候,我们就需要通过不同的用户显示不同的底部

• 首先page.json里面
  
  因为做tabbar所以默认的配置项必须注释,只留下跳转的路径即可

接下来就在components 里面创建一个tabbar文件
tabbar.vue

<template>
	<view>
		<view class="uni-tabbar">
		//遍历tabbar
			<view class="uni-tabbar__item" v-for="(item,index) in tabbar" :key="index" @tap="changeTab(item)">
				<view class="uni-tabbar__bd">
					<view class="uni-tabbar__icon">
					//判断tabbar点击过后的图片路径
						<image v-if="item.pagePath == pagePath" class="icon-img" :src="item.selectedIconPath" mode="aspectFit"></image>
						<image v-else class="icon-img" mode="aspectFit" :src="item.iconPath"></image>
					</view>
				</view>
				//判断tabbar点击前后的样式
				<view class="uni-tabbar__label" :class="{'active': item.pagePath == pagePath}">
					{{item.text}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
		//从父级继承过来的属性 需要在父级中使用:pagePath='pagePath',
			pagePath: String
		},
		data() {
			return {
				// page: '',
				showPage: false,
				containerHeight: 400,
				//公共的tabbar
				tabbar: [{
						"pagePath": "pages/index/index",
						"iconPath": "/static/index.png",
						"selectedIconPath": "/static/indexSelected.png",
						"text": "首页"
					},
					{
						"pagePath": "pages/order/order",
						"iconPath": "/static/all.png",
						"selectedIconPath": "/static/allSelected.png",
						"text": "订单"
					},{
						"pagePath": "pages/cart/cart",
						"iconPath": "/static/me.png",
						"selectedIconPath": "/static/meSelected.png",
						"text": "我的"
					}
				]
			};
		},
		watch: {
			pagePath: {
				handler(pagePath) {
					console.log('pagePath监听===val', pagePath)
				},
				immediate: true
			}
		},
		mounted() {
			// 根据自己的业务需求判断条件为true，替换即可,根据权限设置的tabbar	
			//第三个参数为插入项,第一个参数为第一项位置，第二个参数为要删除几个。
			if (true) {
				this.tabbar.splice(3, 0, {
						"pagePath": "pages/wareHouse/wareHouse",
						"iconPath": "/static/cart.png",
						"selectedIconPath": "/static/cartSelected.png",
						"text": "出入库"
					}
				)
			}
		},
		methods: {
			changeTab(item) {
				this.page = item.pagePath;
				// 使用reLaunch关闭所有的页面，打开新的栏目页面
				// console.log(item.pagePath)
				// console.log(this.page)
				uni.reLaunch({
					url: '/' + this.page,
				});
			},
		}
	}
</script>

<style lang="scss">
	.uni-tabbar {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 999;
		width: 100%;
		display: flex;
		justify-content: space-around;
		height: 100rpx;
		padding: 16rpx 0;
		box-sizing: border-box;
		border-top: solid 1rpx #ccc;
		background-color: #fff;
		box-shadow: 0px 0px 17rpx 1rpx rgba(206, 206, 206, 0.32);

		.uni-tabbar__item {
			display: block;
			line-height: 24rpx;
			font-size: 20rpx;
			text-align: center;
			width: 25%;
		}

		.uni-tabbar__icon {
			height: 24px;
			line-height: 24px;
			text-align: center;
		}

		.icon {
			display: inline-block;
		}

		.uni-tabbar__label {
			line-height: 24rpx;
			font-size: 24rpx;
			color: #999;

			&.active {
				color: #C81816;
			}
		}

		.icon-img {
			height: 24px;
			width: 24px;
		}
	}
</style>