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 :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">
			<image class="image" src="../../static/tabbar-icon/center.png" mode=""></image>
		</view>
		<uv-safe-bottom></uv-safe-bottom>
	</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: '#1ABC9C'
			},
			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;
				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;
		// #ifndef APP-NVUE
		box-sizing: border-box;
		// #endif

	}

	.tabbar-bottom {
		width: 750rpx;
		height: 120rpx;
		// #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: 0px;
		left: 305rpx;

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

	.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: 80rpx;
		width: 54rpx;
		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;
	}
</style>