SxsnWechat/components/CusTabbar/index.vue

<template>
	<view class="bottom_tabbar">
		<view v-for="(item, index) in list" :key="index" @click="changeTabbar(index)">
			<image :src="tabbarValue === index ? item.activeImg : item.inactiveImg"></image>
			<text :class="{ active: tabbarValue === index }">{{ item.text }}</text>
		</view>
	</view>
</template>

<script setup>
	import { ref, onMounted, watch } from 'vue';

	const props = defineProps({
		tabbarIndex: {
			type: Number,
			default: 0
		}
	});

	const tabbarValue = ref(0);
	const list = ref([
		{
			inactiveImg: 'https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/11/cecc3397-5844-4bce-8965-232ea046b67e.png',
			activeImg: 'https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/11/4e81c0b3-b6c4-4aa2-9ce5-ad6a2a256499.png',
			text: '首页',
			path: '/pages/home'
		},
		{
			inactiveImg: 'https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/11/57824411-6c16-4b39-a28f-0a640178416c.png',
			activeImg: 'https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/11/7d00fc58-b738-4ab5-bb4a-cd95a080ec2b.png',
			text: '公益',
			path: '/pages/nonprofit'
		},
		{
			inactiveImg: 'https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/11/44e4a6e4-1d85-4b32-bed8-db2129137dc5.png',
			activeImg: 'https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/11/56acd490-8ca6-4e30-8d1b-5ece55a3ad3c.png',
			text: '我的',
			path: '/pages/my'
		}
	]);

	watch(() => props.tabbarIndex,(newVal) => {
		tabbarValue.value = newVal;
	});

	onMounted(() => {
		tabbarValue.value = props.tabbarIndex;
	});

	const changeTabbar = (e) => {
		tabbarValue.value = e;
		uni.reLaunch({
			url: list.value[e].path
		});
	};
</script>

<style scoped lang="scss">
	.bottom_tabbar {
		width: 100%;
		height: 164rpx;
		background: #ffffff;
		display: flex;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 999;
		padding-top: 19rpx;
		box-sizing: border-box;
		box-shadow: 0rpx -2rpx 8rpx 0rpx rgba(0, 0, 0, 0.06);

		& > view {
			width: calc(100% / 2);
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;

			image {
				width: 48rpx;
				height: 48rpx;
				margin-bottom: 12rpx;
			}

			text {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #B2B2B2;
				line-height: 30rpx;
				text-align: center;

				&.active {
					font-weight: bold;
					color: #151B29;
				}
			}
		}
	}
</style>