uniapp 自定义tabbatr

<template>
	<view>
		<view class="footer_box">
			<view v-for="(item,index) of navigationList" :key="index" @click="onPageJump(item.path)">
				<view class="footer_icon" :class="[item.iconName,item.path == path ? 'active' : '']"></view>
				<text :class="[item.iconName, item.path == path ? 'active' : '']">{{item.name}}</text>
			</view>
		</view>
		<view class="footer_station"></view>
	</view>
</template>
<script setup lang="ts">
	import { ref, onMounted } from 'vue';

	interface NavigationItem {
	  name: string;
	  iconName: string;
	  path: string;
	}

	const path = ref('');
	const navigationList: NavigationItem[] = [
	  {
		name: "首页",
		iconName: 'home',
		path: "/pages/index/index"
	  },
	  {
		name: "分类",
		iconName: 'classfy',
		path: "/pages/index/catelist"
	  },
	  {
		name: "优品",
		iconName: 'superior',
		path: "/pages/index/superior"
	  },
	  // #ifndef MP-WEIXIN
	  {
		name: "我的",
		iconName: 'my',
		path: "/pages/index/my"
	  }
	  // #endif
	];

	//第一次加载
	onMounted(() => {
	  uni.hideTabBar();
	  //获取所有页面
	  let currentPages = getCurrentPages();
	  let page = currentPages[currentPages.length - 1];
	  path.value = '/' + page.route;
	});

	//方法
	const onPageJump = (url: string) => {
	  if (path.value !== url) {
		uni.switchTab({
		  url: url
		});
	  }
	};
</script>
<style lang="scss" scoped>
	
@mixin station {
	height: 100upx;
	box-sizing: content-box;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
} 
.footer_station {
	@include station();
}
.footer_box {
	@include station();  
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 9999;
	width: 100%;
	background-color: #fff;
	border-top: 2upx solid #eee;
	display: flex;
	> view {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		&:active {
			background-color: #f5f5f5;
		}
		.footer_icon {
			width: 48upx;
			height: 48upx;
			background-position: center center;
			background-repeat: no-repeat;
			background-size: cover;
			&.home {
				background-image: url("/static/tab/ic_home.png");
				&.active {
					background-image: url("/static/tab/ic_home_c.png");
				}
			}
			&.classfy {
				background-image: url("/static/tab/ic_classfy.png");
				&.active {
					background-image: url("/static/tab/ic_classfy_c.png");
				}
			}
			&.new-year {
				background-image: url("/static/tab/ic_new_year.png");
				&.active {
					background-image: url("/static/tab/ic_new_year.png");
				}
			}
			&.my {
				background-image: url("/static/tab/ic_my.png");
				&.active {
					background-image: url("/static/tab/ic_my_c.png");
				}
			}
			&.superior{
				background-image: url("/static/tab/ic_superior_good_c.png");
				&.active {
					background-image: url("/static/tab/ic_superior_good.png");
				}
			}
		}
		text {
			font-size: 20upx;
			color: #999;
			margin-top: 6upx;
			&.active {
				color: #4A6BF6;
			}
			&.new-year {
				&.active {
					color: #FB251B;
				}
			}
		}
	}
}
</style>

vue3项目可直接获取pages.json中的tabbar配置

<template>
	<view>
		<view class="footer_box">
			<view v-for="(item,index) of navigationList" :key="index" @click="onPageJump(item.pagePath)">
				<view class="footer_icon" :style="{backgroundImage:'url(' + bgUrl(item) + ')'}"></view>
				<text :class="{'active':item.pagePath == path}">{{item.text}}</text>
			</view>
		</view>
		<view class="footer_station"></view>
	</view>
</template>
<script setup lang="ts">
	import { ref, onMounted } from 'vue';
	import { tabBar } from "@/pages.json"

	interface NavigationItem {
      pagePath: string;
      iconPath: string;
      selectedIconPath: string;
      text: string;
	}

	const path = ref('');
	const navigationList : NavigationItem[] = tabBar.list;

	//第一次加载
	onMounted(() => {
		uni.hideTabBar();
		//获取所有页面
		let currentPages = getCurrentPages();
		let page = currentPages[currentPages.length - 1];
		path.value = page.route;
	});

	const bgUrl = ((item) => {
		console.log(item.pagePath, path.value)
		return item.pagePath === path.value ? item.selectedIconPath : item.iconPath
	})
	//方法
	const onPageJump = (url : string) => {
		if (path.value !== url) {
			let urls = '/' + url
			uni.switchTab({
				url: urls
			});
		}
	};
</script>

<style lang="scss" scoped>
	@mixin station {
		height: 100upx;
		box-sizing: content-box;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.footer_station {
		@include station();
	}

	.footer_box {
		@include station();
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9999;
		width: 100%;
		background-color: #fff;
		border-top: 2upx solid #eee;
		display: flex;

		>view {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			&:active {
				background-color: #f5f5f5;
			}

			.footer_icon {
				width: 48upx;
				height: 48upx;
				background-position: center center;
				background-repeat: no-repeat;
				background-size: cover;
			}

			text {
				font-size: 20upx;
				color: #999;
				margin-top: 6upx;

				&.active {
					color: #4A6BF6;
				}
			}
		}
	}
</style>