mp_exhibitor_miniprog/components/layout/tab-bar.vue

<template>
	<van-tabbar class="u-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>
	import VanTabbar from '@/wxcomponents/vant/tabbar/index'
	import VanTabbarItem from '@/wxcomponents/vant/tabbar-item/index'
	
	export default {
		options: {
			styleIsolation: 'shared'
		},
		components: {
			VanTabbar,
			VanTabbarItem
		},
		props: {
			active: String
		},
		watch: {
			active(val) {
				this.tabbarActive = val
			}
		},
		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(active) {
				this.tabbarActive = active
				if (this.tabbarActive === 'home') {
					uni.setNavigationBarTitle({
					  title: '慕尼黑上海电子生产设备展'
					});
				} else if (this.tabbarActive === 'exhibitor') {
					uni.setNavigationBarTitle({
					  title: '展商'
					});
				} else if (this.tabbarActive === 'activity') {
					uni.setNavigationBarTitle({
					  title: '同期活动'
					});
				} else if (this.tabbarActive === 'user') {
					uni.setNavigationBarTitle({
					  title: '个人中心'
					});
				}
				this.$emit('update:active', active)
				this.$emit('change', active)
			},
			onClickCenter() {
				this.showAlertDialog('功能未开通')
			}
		}
	}
</script>
<style lang="scss">
	.u-tabbar{
		.van-tabbar{
			height: 118rpx;
		}
		.van-tabbar-item{
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			padding-top: 16rpx;
			padding-bottom: 16rpx;
		}
		.van-tabbar-item__icon{
			margin-bottom: 0;
		}
		.van-tabbar-item__text {
			font-size: $fontSize3;
			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: $fontSize3;
			color: #7D7D7D;
			margin-top: 18rpx;
			text-align: center;
		}
		
		.tabbar-center-round {
			@include display-flex-center;
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			background-color: $buttonPrimaryColor;
			margin: auto;
		
			&>view {
				@include 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: 46rpx;
		}
	}
</style>