首先把tabbar中的元素寫(xiě)在一個(gè)list中用v-for進(jìn)行渲染
用一個(gè)interface進(jìn)行定義接口，這樣別人在review你的代碼就可以清晰知道你的tabbar包含什么元素。
利用typescript特性進(jìn)行類型定義，可以省去很多麻煩

import { reactive } from "vue"
import { Images } from "src/static/images"
export interface Tabbar {iconPath: string,selectedIconPath: string,text: string,url: string
}export const tabBarList = reactive<Tabbar[]>([{iconPath: Images.Home,selectedIconPath: Images.HomeActive,text: '首頁(yè)',url: '/pages/home/home',},{iconPath: Images.Personal,selectedIconPath: Images.PersonalActive,text: '我的',url: '/pages/personal/personal',}
])

<template><view class="tabbar-container"><view v-for="(item, index) in tabBarList" :key="index" :url="item.url" :class="{ 'active': activeIndex === index }"><view class="icon-container" @click="switchTab(index)"><view class="icon"><image class="icon-image" :src="activeIndex === index ? item.selectedIconPath : item.iconPath" /></view><view class="text">{{ item.text }}</view></view></view></view>
</template>

渲染好之后，tabbar有個(gè)點(diǎn)擊跳轉(zhuǎn)頁(yè)面，以及點(diǎn)亮圖標(biāo)
點(diǎn)亮圖標(biāo)，這邊的currentPath一定注意格式，打印出getCurrentPages()[0].route就會(huì)發(fā)現(xiàn)它是pages/personal/personal，而不是/pages/personal/personal

//vue
<view class="icon"><image class="icon-image" :src="activeIndex === index ? item.selectedIconPath : item.iconPath" /></view>//jsconst currentPath =  "/" + getCurrentPages()[0].route;
tabBarList.forEach((item, index) => {if (item.url === currentPath) {store.activeIndex = index;uni.switchTab({url: item.url,})}
})

跳轉(zhuǎn)：由于是page頁(yè)面，因此必須用switchtab方法而不能用nacigatorTo;這邊的index及頁(yè)面序號(hào)必須存儲(chǔ)在pinia庫(kù)中，否則界面一刷新它就不變了。

function switchTab(index) {if (index === store.activeIndex) {return}store.setActiveIndex(index)uni.switchTab({url: tabBarList[index].url})
}

import { defineStore } from 'pinia'interface State {activeIndex: number;sceneId: number;isLogin: boolean;nickname: string;avatar: string
}export const useTabbarStore = defineStore('store', {state: (): State => {return { activeIndex: 0,isLogin: false,sceneId: 1,nickname: '立即登錄',avatar: 'https://bestwellai-aigo.oss-cn-shanghai.aliyuncs.com/icon/personal/personal_avatar.svg' }},actions: {setActiveIndex(index) {this.activeIndex = index;},setUsername(nickname,avatar){this.nickname = nickname;this.avatar = avatar;},setSceneId(sceneId) {this.sceneId = sceneId;}},
})

完成效果：自定義的效果就是樣式可以自己寫(xiě)，非常方便；以及一個(gè)小程序需要三四種形式的tabbar時(shí)可以這樣操作。