school_uni/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" :class="item.shaking?'shaking':''">
			<view class="img-box" v-if="index != 2">
				<img :src="item.isCheck?item.tabIconSelect:item.tabIcon" alt="" />
			</view>
			<view class="big-img-box" v-if="index == 2">
				<img :src="item.isCheck?item.tabIconSelect:item.tabIcon" alt="" />
			</view>
			<view class="text-box" v-if="index != 2" :style="{color:item.isCheck?'#48D1CC':'#000'}">
				{{item.tabName}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList: [{
					tabName: '首页',
					tabIcon: '/static/images/tabbar/shouye1.png',
					tabIconSelect: '/static/images/tabbar/shouye.png',
					isCheck: true,
					shaking:false
				}, {
					tabName: '配送',
					tabIcon: '/static/images/tabbar/peisong1.png',
					tabIconSelect: '/static/images/tabbar/peisong.png',
					isCheck: false,
					shaking:false
				}, {
					tabName: '发布',
					tabIcon: '/static/images/tabbar/fabu222.png',
					tabIconSelect: '/static/images/tabbar/shouye.png',
					isCheck: false,
					shaking:false
				}, {
					tabName: '鱼塘',
					tabIcon: '/static/images/tabbar/xianyu1.png',
					tabIconSelect: '/static/images/tabbar/xianyu.png',
					isCheck: false,
					shaking:false
				}, {
					tabName: '我的',
					tabIcon: '/static/images/tabbar/wode1.png',
					tabIconSelect: '/static/images/tabbar/wode.png',
					isCheck: false,
					shaking: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);
						if(index == 2) return
						this.tabList[i].isCheck = true
						if (this.tabList[i].shaking) return

						this.tabList[i].shaking = true

						setTimeout(() => {
							this.tabList[i].shaking = false
						}, 500)
					} 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 img{
		width: 50rpx;
		height: 50rpx;
		background-size: 100%;
	}
	.big-img-box img{
		width: 80%;
		height: 90%;
		background-size: 100%;
		margin: -20rpx 0 0 10%;
	}

	@keyframes simple-scale-shake {
		0% {
			transform: scale(1);
		}
		10% {
			transform: scale(1.5);
		}
		20% {
			transform: scale(0.9);
		}
		30% {
			transform: scale(1.15);
		}
		40% {
			transform: scale(0.95);
		}
		50% {
			transform: scale(1.1);
		}
		60% {
			transform: scale(0.97);
		}
		70% {
			transform: scale(1.05);
		}
		80% {
			transform: scale(0.99);
		}
		90% {
			transform: scale(1.02);
		}
		100% {
			transform: scale(1);
		}
	}

	.shaking {
		animation: simple-scale-shake 0.8s ease-out;
	}

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