dandelionPlatformToB-uni-v3/components/custom-tabbar/custom-tabbar.vue

<template>
	<view class="custom-tabbar">
		<view class="custom-tabbar__content">
			<view
				v-for="(item, index) in tabList"
				:key="index"
				class="custom-tabbar__item"
				@tap="switchTab(index)"
			>
				<view class="custom-tabbar__icon">
					<text
						class="iconfont"
						:class="item.icon"
						:style="{
							fontSize: '24px',
							color: currentIndex === index ? activeColor : inactiveColor
						}"
					></text>
				</view>
				<text
					class="custom-tabbar__text"
					:style="{
						color: currentIndex === index ? activeColor : inactiveColor
					}"
				>{{ item.text }}</text>
			</view>
		</view>
		<view class="custom-tabbar__safe-area"></view>
	</view>
</template>

<script>
export default {
	name: 'CustomTabbar',
	props: {
		current: {
			type: Number,
			default: -1
		}
	},
	data() {
		return {
			currentIndex: 0,
			activeColor: getApp().globalData.themeColor || '#fea702',
			inactiveColor: '#606266',
			watcherTimer: null,
			tabList: [
				{
					icon: 'icon-home',
					text: '首页',
					pagePath: '/pages/home/index'
				},
				{
					icon: 'icon-message',
					text: '消息',
					pagePath: '/pages/message/index'
				},
				{
					icon: 'icon-plus-square',
					text: '报名',
					pagePath: '/pages/apply/index'
				},
				{
					icon: 'icon-filesearch',
					text: '工单',
					pagePath: '/pages/order/index'
				},
				{
					icon: 'icon-user',
					text: '我的',
					pagePath: '/pages/person/index'
				}
			]
		}
	},
	created() {
		uni.hideTabBar({
			animation: false
		})
		this.startWatchers()
	},
	methods: {
		startWatchers() {
			this.watcherTimer = setInterval(() => {
				const newColor = getApp().globalData.themeColor
				if (newColor && newColor !== this.activeColor) {
					this.activeColor = newColor
				}
				if (this.current >= 0 && this.currentIndex !== this.current) {
					this.currentIndex = this.current
				}
			}, 500)
		},
		switchTab(index) {
				if (this.currentIndex === index) return
				uni.switchTab({
					url: this.tabList[index].pagePath,
					animationType: 'none'
				})
			}
	},
	beforeDestroy() {
		if (this.watcherTimer) {
			clearInterval(this.watcherTimer)
		}
	},
	watch: {
		current: {
			immediate: true,
			handler(newVal) {
				if (newVal >= 0) {
					this.currentIndex = newVal
				}
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.custom-tabbar {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 999;
	background-color: #ffffff;
	border-top: 1rpx solid #e5e5e5;

	&__content {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		height: 50px;
	}

	&__item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		flex: 1;
		height: 100%;
	}

	&__icon {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 28px;
	}

	&__text {
		font-size: 10px;
		line-height: 14px;
		margin-top: 2px;
	}

	&__safe-area {
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}
}


</style>