school-peisong/components/tab-bar/tab-bar.vue

<template>
	<view class="tabbar-box">
		<view class="bar-box" @click="clickBar(index)" v-for="(item,index) in tabList" :key="index">
			<view class="img-box">
				<image :src="item.isCheck?item.tabIconSelect:item.tabIcon" alt="" />
			</view>
			<view class="text-box" :style="{color:item.isCheck?'#48D1CC':'#000'}">
				{{item.tabName}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList: [{
					tabName: '工作台',
					tabIcon: '/static/image/inventory.png',
					tabIconSelect: '/static/image/inventory-sel.png',
					isCheck: true
				}, {
					tabName: '订单',
					tabIcon: '/static/image/billing.png',
					tabIconSelect: '/static/image/billing-sel.png',
					isCheck: false
				}, {
					tabName: '我的',
					tabIcon: '/static/image/staff.png',
					tabIconSelect: '/static/image/staff-sel.png',
					isCheck: false
				}]
			}
		},
		props: {
			//页面的宽度
			width: {
				type: Number,
				default: true
			},
			//选中tab的下标
			currentIndex: {
				type: Number,
				default: 0
			}
		},
		watch: {
			//监听currentIndex变化
			currentIndex(newVal) {
				for (let i = 0; i < this.tabList.length; i++) {
					if (newVal == i) {
						this.tabList[i].isCheck = true
					} else {
						this.tabList[i].isCheck = false
					}
				}
			}
		},
		methods: {
			//点击tab切换
			clickBar(index) {
				for (let i = 0; i < this.tabList.length; i++) {
					if (index == i) {
						this.$emit('tab-index', i);
						this.tabList[i].isCheck = true
					} else {
						this.tabList[i].isCheck = false
						this.$forceUpdate()
					}
				}
			}
		}
	}
</script>

<style>
	.tabbar-box {
		width: 100%;
		position: fixed;
		bottom: 0;
		height: 150rpx;
		background: rgba(255, 255, 255, 1);
		margin: 0 auto;
		display: flex;
		z-index: 999;
		border-top: 1px solid #eee;
		border-top-left-radius: 60rpx;
		border-top-right-radius: 60rpx;
	}

	.bar-box {
		height: 100%;
		flex: 1;
	}

	.img-box {
		width: 50rpx;
		height: 50rpx;
		margin: 20rpx auto 10rpx;
		cursor: pointer;
		display: block;
		transition: all 0.3s;
		transform-origin: center center;
		user-select: none;
	}

	.img-box image{
		width: 50rpx;
		height: 50rpx;
		background-size: 100%;
	}
	.big-img-box image{
		width: 80%;
		height: 90%;
		background-size: 100%;
		margin: -20rpx 0 0 10%;
	}

	.text-box {
		text-align: center;
		font-size: 20rpx;
		font-family: 'PingFang HK';
		font-weight: bold;
	}
	.big-img-box{
		width: 100%;
		height: 100%;
	}
</style>