uniProject/components/custom-tabbar/custom-tabbar.vue

<template>
	<view class="ezy-custom-tabbar">
		<view class="tabbar-item-box">
			<view class="tabbar-item" v-for="(item, index) in tabList" :key="index" @click="switchTab(item.path)"
				:style="{backgroundImage: 'url(' + item.iconPath + ')'}"></view>
		</view>
	</view>
</template>

<script>
	import {
	useTabBarHistory
	} from '@/utils/emitEvents.js';
	import {
		toast
	} from '@/utils/common'
	export default {

		data() {
			return {
				tabList: [{
						iconPath: 'static/images/tabbar/unselect/plan-sj.png',
						path: `/pages/study/index`
					},
					{
						iconPath: 'static/images/tabbar/unselect/develop-sj.png',
						path: '/pages/study/index2'
					},
					{
						iconPath: 'static/images/tabbar/unselect/partner-sj.png',
						path: '/pages/study/index3'
					},
					{
						iconPath: 'static/images/tabbar/unselect/my-sj.png',
						path: `/pages/my/index`
					},
					// 更多 Tab 项...
				]
			};
		},
		methods: {

			switchTab(path, params = {}) {
				if(path =='/pages/study/index2'||path =='/pages/study/index3'){
					toast("此功能页面暂未开放!")
					return false
				}
				let storage = useTabBarHistory().getTabBarStorage()
				let queryString = Object.keys(storage).map(key =>
					`${encodeURIComponent(key)}=${encodeURIComponent(storage[key])}`).join('&');
				if (queryString) {
					path += `?${queryString}`;
				}			
				uni.navigateTo({
					url: path
				});
				// 使用 uni.switchTab 进行跳转（适用于 tabBar 页面）
				// if (this.isTabBarPage(path)) {
				//   uni.switchTab({
				//     url: path
				//   });
				// } else {
				//   // 使用 uni.navigateTo 进行跳转（适用于非 tabBar 页面）
				//   uni.navigateTo({
				//     url: path
				//   });
				// }
			},
			isTabBarPage(path) {
				// 根据你的 tabBar 页面路径进行判断
				const tabBarPages = ['/pages/study/index', '/pages/study/index', '/pages/study/index', '/pages/my/index'];
				return tabBarPages.includes(path);
			}
		},
		created() {
		}

	}
</script>


<style scoped>
	.custom-tabbar {
		display: flex;
		justify-content: space-around;
		align-items: center;
		/* 其他样式 */
	}

	.tab-item {
		flex: 1;
		/* 样式 */
	}

	.tab-icon {
		/* 图标样式 */
	}
</style>