novelAD/components/custom-tabbar.vue

<template>
	<view class="custom-tabbar" v-if="isShowTabbar">
		<view v-for="(item, index) in list" :key="index" class="tabbar-item" @click="switchTab(index)">
			<!-- <view v-if="item.text === '新建'" class="menu-item">
				<image class="add_icon" :src="item.icon" mode="scaleToFill" />
			</view> -->
			<view class="menu-item">
				<image v-if="currentIndex === index" class="w-48 h-48" :src="item.check_icon" mode="scaleToFill" />
				<image v-else class="w-48 h-48" :src="item.icon" mode="scaleToFill" />
				<text class="mgt-4" :class="{ active: currentIndex === index }">{{ item.text }}</text>
			</view>
		</view>
	</view>
</template>

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

// 当前选中的 Tab 索引
const props = defineProps(["currentIndex"])

// TabBar 列表
const list = ref([{
	text: "书架",
	pagePath: "/pages/index/index",
	icon: '/static/image/tabbar/bookshelf.png',
	check_icon: '/static/image/tabbar/bookshelf_on.png'
},
{
	text: "书城",
	pagePath: "/pages/bookMall/index",
	icon: '/static/image/tabbar/bookMall.png',
	check_icon: '/static/image/tabbar/bookMall_on.png'
},
{
	text: "我的",
	pagePath: "/pages/my/index",
	icon: '/static/image/tabbar/my.png',
	check_icon: '/static/image/tabbar/my_on.png'
},
]);

// 定义 isShowTabbar 变量
const isShowTabbar = ref(true);

// // 监听 props.currentIndex 变化，控制 tabbar 显示状态
// watch(() => props.currentIndex, (newIndex) => {
// 	if (list.value[newIndex]?.text === "新建") {
// 		isShowTabbar.value = false; // 隐藏 tabbar
// 	} else {
// 		isShowTabbar.value = true; // 显示 tabbar
// 	}
// });

// 切换 Tab
const switchTab = (index) => {
	/* if(index == 1) {
		uni.navigateTo({
			url: "/pages/creat/newBook",
		});
	} else { */
	uni.switchTab({
		url: list.value[index].pagePath,
	});
	// }
};
</script>

<style scoped>
.custom-tabbar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999;
	display: flex;
	height: 100rpx;
	/* 适配安全区 */
	padding-top: 10rpx;
	/* 默认 Android */
	padding-bottom: 10rpx;
	background-color: #ffffff;
	/* background-color: transparent; */
	justify-content: space-between;
}

/* 兼容 iOS 安全区域 */
@supports (bottom: env(safe-area-inset-bottom)) {
	.custom-tabbar {
		height: calc(100rpx + env(safe-area-inset-bottom));
		padding-bottom: env(safe-area-inset-bottom);
	}
}

.tabbar-item {
	flex: 1;


}

.menu-item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	color: #E5DCD6;
	font-size: 20rpx;


}

.add_icon {
	position: absolute;
	top: -30rpx;
	width: 96rpx;
	height: 96rpx;
}

.active {
	color: #FFA74F;
}
</style>