mall_client/zyhs3_uniapp/components/tabbar.vue

<template>
	<view>
		<view class="nav">
			<block v-for="(item,index) in tabbar">
				<view class="nav-item" v-if="!item.midButton" :key="index" @click="jumpTo(item, index)">
					<image 
						:src="current === index ? item.selectedIconPath :item.iconPath" 
						class="icon" mode="" :class="current === index ? 'bounceIn':''">
					</image>
					<text class="name" :style="{ color: current === index ? item.activeColor : item.inactiveColor}">{{item.name}}</text>
					<!-- <text class="name" :class="{active: current === index}">{{item.name}}</text> -->
				</view>
				<view class="nav-item" @click="jumpTo(item, index)" v-if="false">
					<image :src="item.iconPath" class="midButton" mode=""></image>
				</view>
			</block>
		</view>
		<view class="nav-height"></view>
	</view>
</template>

<script>
	let userInfo = uni.getStorageSync('userInfo');
	export default {
		name:"tabbar",
		data() {
			return {
				current: 0,
				tabPages: [
					{
						name: '首页',
						url: '/pages/home/index',
						iconPath: '/static/tabber/home.png',
						selectedIconPath: '/static/tabber/home-use.png',
						activeColor: '#22bd5e',
						inactiveColor: '#333333'
					},
					{
						name: '我的',
						url: '/pages/user/index',
						iconPath: '/static/tabber/my.png',
						selectedIconPath: '/static/tabber/my-use.png',
						activeColor: '#22bd5e',
						inactiveColor: '#333333'
					}
				]
			};
		},
		mounted(){
			let routes = getCurrentPages();
			let curRoute = routes[routes.length - 1].route
			this.tabbar.map((item, index) => {
				if (item.url.indexOf(curRoute) > -1) {
					this.current = index;
				}
			})
		},
		methods: {
			jumpTo(row, index) {
				return
				if (this.current === index) return;
				// 点击中间按钮的时候不改变current，因为进入视频后返回应该是停留在进入前的页面
				if (index !== 2) {
					this.current = index;
				}
				if (row.midButton) {
					uni.navigateTo({
						url: row.url
					})
				} else {
					console.log(row)
					uni.reLaunch({
						url: row.url
					})	
				}
			}
		},
	}
</script>

<style scoped lang="scss">
	@-webkit-keyframes bounceIn {
	    0% {
	        opacity: 0;
	        -webkit-transform: scale(.3);
	        transform: scale(.3)
	    }
	
	    50% {
	        opacity: 1;
	        -webkit-transform: scale(1.05);
	        transform: scale(1.05)
	    }
	
	    70% {
	        -webkit-transform: scale(.9);
	        transform: scale(.9)
	    }
	
	    100% {
	        opacity: 1;
	        -webkit-transform: scale(1);
	        transform: scale(1)
	    }
	}
	
	@keyframes bounceIn {
	    0% {
	        opacity: 0;
	        -webkit-transform: scale(.3);
	        -ms-transform: scale(.3);
	        transform: scale(.3)
	    }
	
	    50% {
	        opacity: 1;
	        -webkit-transform: scale(1.05);
	        -ms-transform: scale(1.05);
	        transform: scale(1.05)
	    }
	
	    70% {
	        -webkit-transform: scale(.9);
	        -ms-transform: scale(.9);
	        transform: scale(.9)
	    }
	
	    100% {
	        opacity: 1;
	        -webkit-transform: scale(1);
	        -ms-transform: scale(1);
	        transform: scale(1)
	    }
	}
	
	.bounceIn {
	    -webkit-animation-name: bounceIn;
	    animation-name: bounceIn
	}
	$height: 98rpx;
	.nav-height{
		background-color: #f2f2f2;
		height: $height + 2rpx;
	}
	.nav{
		height: $height;
		display: flex;
		align-items: center;
		// justify-content: space-around;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		border-top: 2rpx solid #eee;
		background: white;
		&-item{
			// #ifndef APP-PLUS
			width: 25%;
			// #endif
			// #ifdef APP-PLUS
			width: 50%;
			// #endif
			display: flex;
			flex-direction: column;
			// align-items: center;
			justify-content: center;
			.icon{
				display: block;
				margin-bottom: 6rpx;
				width: 78rpx;
				height: 88rpx;
			}
			.name{
				color: #a0a1a2;
				font-size: 24rpx;
				&.active{
					color: rgb(248, 210, 71);
				}
			}
		}
		.midButton{
			width: 120rpx;
			height: 120rpx;
			margin-top: -40rpx;
		}
	}
</style>