mp_exhibitor_miniprog/components/layout/tab-bar.vue

<template>
	<van-tabbar :active="tabbarActive" @change="onChange" :placeholder="true" active-color="#E57519"
		inactive-color="#7D7D7D">
		<template v-for="(item, index) in list">
			<van-tabbar-item v-if="index !== 2" :name="item.name" :key="index" :icon="item.icon" icon-prefix="tabbar-icon">
				{{ item.text }}
			</van-tabbar-item>
			<template v-else>
				<view class="tabbar-center-item" :class="{ 'active': tabbarActive === item.name } " hover-class="active"
					@click="onClickCenter">
					<view class="tabbar-center-round">
						<view>
							<van-icon :name="item.icon" class-prefix="tabbar-icon" />
						</view>
					</view>
					<view class="tabbar-center-text">
						{{ item.text }}
					</view>
				</view>
			</template>
		</template>
	</van-tabbar>
</template>

<script>
	export default {
		options: {
			styleIsolation: 'shared'
		},
		props: {
			active: String
		},
		data() {
			return {
				tabbarActive: 'home',
				list: [{
						name: 'home',
						icon: 'home',
						text: '首页',
						url: '/pages/index'
					}, {
						name: 'exhibitor',
						icon: 'exhibitor',
						text: '展商',
						url: '/pages/signup/signup'
					},
					{
						name: 'registration',
						icon: 'registration',
						text: '观众预登记',
						url: '/pages/test'
					},
					{
						name: 'activity',
						icon: 'activity',
						text: '同期活动',
						url: '/pages/test'
					},
					{
						name: 'user',
						icon: 'user',
						text: '个人中心',
						url: '/pages/test'
					}
				]
			}
		},
		created() {
			this.tabbarActive = this.active
		},
		methods: {
			onChange(e) {
				this.tabbarActive = e.detail
				this.$emit('update:active', e.detail)
				this.$emit('change', e.detail)
			},
			onClickCenter() {
				uni.navigateTo({
					url: '/pages/components/index'
				})
			}
		}
	}
</script>
<style lang="scss">
	.van-tabbar-item__text {
		font-size: $fontSize2;
		color: #7D7D7D;
	}

	.van-tabbar-item--active {
		.van-tabbar-item__text {
			color: $textActionColor;
		}
	}

	.tabbar-center-item {
		position: relative;
		top: -50rpx;
		z-index: 1;
		flex: 1;

		&.active {
			.tabbar-center-text {
				color: $textActionColor;
			}
		}
	}

	.tabbar-center-text {
		font-size: $fontSize2;
		color: #7D7D7D;
		margin-top: 10rpx;
		text-align: center;
	}

	.tabbar-center-round {
		@extend .display-flex-center;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		background-color: $buttonPrimaryColor;
		margin: auto;

		&>view {
			@extend .display-flex-center;
			width: 96rpx;
			height: 96rpx;
			border-radius: 50%;
			border: 1rpx solid #FFFFFF;
			color: #FFFFFF;
			background-color: $buttonPrimaryColor;

			.tabbar-icon {
				font-size: 60rpx;
			}
		}
	}

	.tabbar-icon-activity {
		font-size: 40rpx;
	}

	.tabbar-icon-user {
		font-size: 48rpx;
	}
</style>