novelAD/components/custom-tabbar.vue

<template>
	<view class="custom_tabbar">
		<view class="side_help">
			<view class="help" @click="navTo('help')">
				<image class="w-30 h-30 mgb-6" src="/static/image/tabbar/help.png" mode="scaleToFill" />
				<view class="text">帮助</view>
			</view>
			<view class="mgt-20" @click="navTo('complaint')">
				<image class="w-30 h-30 mgb-6" src="/static/image/tabbar/complaint.png" mode="scaleToFill" />
				<view class="text">投诉</view>
			</view>
		</view>

		<view class="tools" @click="navTo('toolsMall')">
			<image class="w-80 h-80" src="/static/image/tabbar/tools_icon.png" mode="scaleToFill" />
			<view class="title">工具广场</view>
		</view>

		<view class="red_packet" @click="navTo('redPacket')">
			<image class="img" src="/static/image/tabbar/red_packet.png" mode="scaleToFill" />
		</view>

		<view class="custom-tabbar">
			<view v-for="(item, index) in list" :key="index" class="tabbar-item" @click="switchTab(index)">
				<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>
	</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'
},
]);


// 切换 Tab
const switchTab = (index) => {
	uni.switchTab({
		url: list.value[index].pagePath,
	});
};


const navList = {
	help: '/pages/commonModule/help',
	complaint: '/pages/commonModule/complaint',
	redPacket: '/pages/commonModule/redPacket',
	toolsMall: '/pages/toolsMall/index'
}

const navTo = (name) => {
	uni.navigateTo({
		url: navList[name],
	});
}

</script>

<style lang="scss" scoped>
.custom_tabbar {
	z-index: 9999;
}

.side_help {
	position: fixed;
	left: 0;
	bottom: 20%;
	width: 50rpx;
	background-color: red;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #fff;
	text-align: center;
	padding: 20rpx 0;
	border-radius: 0 30rpx 30rpx 0;
	z-index: 9999;

	.text {
		text-align: center;
	}
}

.tools {
	position: fixed;
	right: 20rpx;
	bottom: 33%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 9999;

	.title {
		margin-top: 2rpx;
		font-size: 20rpx;
		width: 100rpx;
		height: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(to right, #c7dae2, #84c9e6);
		border-radius: 50rpx;
		color: #fff;
	}
}

.red_packet {
	position: fixed;
	right: 20rpx;
	bottom: 20%;
	z-index: 9999;

	.img {
		width: 127rpx;
		height: 96rpx;
	}
}

.custom-tabbar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	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>