mall_client/zyhs3_uniapp/pages/index/components/tabbar.vue

<template>
	<view class="nav-box">
		<view class="nav flex flex-between">
			<block v-for="(item,index) in list">
                <view class="nav-item" v-if="!item.midButton" :key="index" @click="onChange(item)">
                    <image :src="item.component === actived ? item.selectedIconPath :item.iconPath" class="icon" mode=""
                        :class="item.component === actived ? 'bounceIn':''">
                    </image>
                    <text class="name" :style="{ color: (item.component === actived) ? item.activeColor : item.inactiveColor }">{{item.name}}</text>
                </view>
                <view class="nav-item" @click="onChange(item)" v-else>
                    <image :src="item.iconPath" class="midButton" mode=""></image>
                    <text class="name" :style="{ color: (item.component === actived) ? item.activeColor : item.inactiveColor }">{{item.name}}</text>
                </view>
			</block>
		</view>
		<view class="nav-height"></view>
	</view>
</template>

<script>
	let userInfo = uni.getStorageSync('userInfo');
	export default {
		name: "tabbar",
		emits: ["change"],
		props: {
			actived: {
				type: String,
				default: () => ""
			},
			list: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				current: 0,
			};
		},
		mounted() {
			let routes = getCurrentPages();
			let curRoute = routes[routes.length - 1].route
			this.list.map((item, index) => {
				if (item.url.indexOf(curRoute) > -1) {
					this.current = index;
				}
			})
		},
		methods: {
			jumpTo(row, index) {
				if (this.current === index) return;
				// 点击中间按钮的时候不改变current，因为进入视频后返回应该是停留在进入前的页面
				if (index !== 2) {
					this.current = index;
				}
				if (row.midButton) {
					uni.navigateTo({
						url: row.url
					})
				} else {
					uni.reLaunch({
						url: row.url
					})
				}
			},
			onChange(tab) {
				console.log(tab);
				this.$emit("change", tab)
			}
		},
	}
</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: 50%;
			// #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: 52rpx;
				height: 52rpx;
			}

            .name {
                font-size: 24rpx;
            }
		}

		.midButton {
			width: 52rpx;
			height: 52rpx;
		}
	}
</style>