MoeNovaClient/components/tabbar/tabbar.vue

<template>
	<view class="tabbar-area">
		<view class="tabbar-bottom" :style="{ backgroundColor: backgroundColor, height: tabbarHeight + 'px' }">
			<view class="tabbar-bottom-item" ref="tabbarItem" v-for="(item, index) in tabbars" :key="index"
				@click="switchTab(item, index)">
				<image v-if="item.type!='midButton'" :src="currentIndex == index ? item.selectedIconPath : item.iconPath"
					:class="['tabbar-bottom-item-icon']"></image>
				<text class="tabbar-bottom-item-text"
					:style="{ color: currentIndex == index ? textActiveColor : textColor }">{{ item.text }}</text>
				<text class="tabbar-bottom-item-count" v-if="item.count">{{ item.count >= 99 ? '99+' : item.count
				}}</text>
			</view>
		</view>
		<view class="midButton" @click="midButtonGo()">
			<image class="image" src="../../static/tabbar-icon/center.png" mode=""></image>
		</view>
		<view class="safe-bottom-area" style="background-color: #fff;">
			<uv-safe-bottom></uv-safe-bottom>
		</view>
	</view>
</template>
<script>
let animationModule = null;
// #ifdef APP-NVUE
animationModule = weex.requireModule('animation')
// #endif
export default {
	props: {
		currentIndex: {
			type: Number,
			default: 0
		},
		backgroundColor: {
			type: String,
			default: '#fff'
		},
		textColor: {
			type: String,
			default: '#717171'
		},
		textActiveColor: {
			type: String,
			default: '#000'
		},
		tabbarHeight: {
			type: Number,
			default: 60
		},
		tabbars: {
			type: Array,
			default: () => ([])
		},
		midButton: {
			type: Boolean,
			default: true,
		}
	},
	data() {
		return {}
	},
	mounted() {
		uni.hideTabBar()
	},

	methods: {
		switchTab(item, index) {
			if (!item.pagePath) return;  
			if (item.pagePath == '/pages/message/mailMessage') {
				uni.$emit('check_login', () => {
					uni.switchTab({
						url: item.pagePath,
					});
				})
				return;
			}
			uni.switchTab({
				url: item.pagePath,
			});
			// this.payAnimation()
		},
		midButtonGo(item, index) {
			if (!item.pagePath) return;
			console.log();
			// uni.switchTab({
			// 	url: item.pagePath,
			// });
			// this.payAnimation()
		},
		async payAnimation() {
			const active = [{
				dom: this.$refs.tabbarItem[this.currentIndex],
				styles: {
					transform: `scale(1.2)`
				},
				transformOrigin: 'center center',
				timingFunction: 'ease-in-out',
				duration: 100,
			},
			{
				dom: this.$refs.tabbarItem[this.currentIndex],
				styles: {
					transform: `scale(1)`
				},
				transformOrigin: 'center center',
				timingFunction: 'ease-in-out',
				duration: 100,
			}
			]
			for (var i = 0; i < active.length; i++) {
				await this.animationActive(active[i])
			}
		},
		animationActive(active) {
			return new Promise((resolve, reject) => {
				animationModule.transition(active.dom, {
					styles: active.styles || {},
					duration: active.duration,
					timingFunction: active.timingFunction,
					delay: active.delay || 0,
					transformOrigin: active.transformOrigin,
				}, () => {
					resolve()
				})
			})
		},
	}
}
</script>

<style lang="scss" scoped>
.tabbar-area {
	position: fixed;
	bottom: 0rpx;
	width: 750rpx;
	height: 145rpx;
	background-color: transparent;
	padding-top: 25rpx;
	// padding-top: 48rpx;
	// #ifndef APP-NVUE
	box-sizing: border-box;
	// #endif
	display: flex;
	flex-direction: column;
	background: url("@/static/home/taber-bg.png") center top / 100% auto;
}

.tabbar-bottom {
	width: 750rpx;
	flex: 1;
	// #ifndef APP-NVUE
	display: flex;
	// #endif
	flex-direction: row;
	align-items: center;
	justify-content: space-around;
	border-top-left-radius: 40rpx;
	border-top-right-radius: 40rpx;
}

.midButton {
	position: absolute;
	top: 10px;
	left: 330rpx;

	.image {
		height: 96rpx;
		width: 96rpx;
	}
}

.tabbar-bottom-item {
	// #ifndef APP-NVUE
	display: flex;
	// #endif
	align-items: center;
	justify-content: center;
	flex-direction: column;
	height: 120rpx;
	width: 100rpx;
	position: relative;
}

.tabbar-bottom-item-icon {
	height: 68rpx;
	width: 68rpx;
	position: relative;
}


.tabbar-bottom-item-text {
	font-size: 20rpx;
	color: rgb(113, 113, 113);
}

.tabbar-bottom-item-count {
	background-color: #ff4d4d;
	font-size: 20rpx;
	font-weight: bold;
	color: #ffffff;
	padding: 8rpx;
	position: absolute;
	top: 0rpx;
	right: 0rpx;
	border-radius: 100rpx;
	/* 半径为高度的一半 */
	// #ifndef APP-NVUE
	display: flex;
	// #endif
	justify-content: center;
	align-items: center;
}

.safe-bottom-area {
	width: 750rpx;
	background-color: #fff;
}
</style>