實現思路：

? ? ? ? 創建一個js文件用來存放所有的tabbar,不同的數組表示不同的tabbar組合。
? ? ? ? 創建一個vue文件用來制作底部tabbar組件。
? ? ? ? 使用vuex存儲用戶的身份信息,根據身份信息切換tabbar組合。
具體步驟：

? ? ? ?新建一個tabbar.js文件，將不同的tabbar組合用不同的數組表示出來。

// 公共頁面
export const publicBar = [{"pagePath": "/pages/home/index","iconPath": require("@/static/logo.png"),"selectedIconPath": require("@/static/logo2.jpg"),"text": "首頁"},{"pagePath": "/pages/car/index","iconPath": require("@/static/logo.png"),"selectedIconPath": require("@/static/logo.png"),"text": "購物車"}
]// 自己的頁面
export const selfBar = [{"pagePath": "/pages/home/index","iconPath": require("@/static/logo.png"),"selectedIconPath": require("@/static/logo.png"),"text": "首頁"},{"pagePath": "/pages/mine/index","iconPath": require("@/static/logo.png"),"selectedIconPath": require("@/static/logo.png"),"text": "我的"},
]

創建一個vue文件編寫底部tabbar組件代碼。

<template><view class="tabbar-list"><view class="tabbar-item" v-for="(item, index) in tabBarList" :key="index" @click="changeActive(item, index)"><image class="img" :src="activeIndex === index ? item.selectedIconPath : item.iconPath"></image><view>{{ item.text }}</view></view></view>
</template><script>import {mapState,mapMutations} from 'vuex'export default {data() {return {}},computed: {...mapState('tabBarModule', ['activeIndex', 'tabBarList']),},methods: {...mapMutations('tabBarModule', ['setUserInfo', 'changeIndex']),// 修改點擊的tabbar項changeActive(item, index) {this.changeIndex(index)uni.switchTab({url: item.pagePath})},},mounted() {// 模擬登錄后獲取的用戶信息,'public'為公共模塊,非'public'為我的模塊this.setUserInfo('public')// this.setUserInfo('mine') 用這個進行切換就能看到不同的底部tabbar}}
</script>
<style lang="scss" scoped>.tabbar-list {display: flex;position: fixed;bottom: 0;width: 100%;height: 100rpx;border: 1px solid #ccc;overflow: hidden;.tabbar-item {flex: 1;display: flex;flex-direction: column;align-items: center;justify-content: center;.img {width: 50rpx;height: 50rpx;}}}
</style>

在根目錄創建store文件夾,在store文件夾下創建module文件夾和創建index.js文件,在module文件夾下面創建tabBarModule.js文件。 ? ? ? ? ? ? ? ? ? ? ? ? ? ??
在tabBarModule.js文件中編寫vuex代碼,然后在store文件夾下面的index.js文件中引入tabBarModule.js文件作為一個模塊。

// 引入兩個tabbar組合
import {publicBar,selfBar
} from '@/utils/tabbar.js'
export default {// 開啟命名空間namespaced: true,// 存放基礎數據state: {// 用戶信息userInfo: uni.getStorageSync('userInfo') || '',// 初始化一個空的tabbar組合tabBarList: [],// 當前選中的tabbar項，控制頁面刷新導航高亮位置不變activeIndex: uni.getStorageSync('acIndex') || 0,?},mutations: {// 保存用戶信息setUserInfo(state, token) {uni.setStorageSync('userInfo', token)state.userInfo = token;// 根據用戶信息切換tabbar組合token !== 'public' ?state.tabBarList = selfBar :state.tabBarList = publicBar},// 記錄當前選中的tabbar項changeIndex(state, index) {uni.setStorageSync('acIndex', index)state.activeIndex = index}},
}
在index.js文件中引入tabBarModule模塊,并且在mian.js中引入store
import tabBarModule from '@/store/module/tabBarModule.js'
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({modules: {tabBarModule}
})

在每個頁面引入剛才的底部tabbar組件,并且使用uni.hideTabBar()隱藏默認導航欄

附上page.json文件供參考?

{"pages": [ //pages數組中第一項表示應用啟動頁，參考：https://uniapp.dcloud.io/collocation/pages{"path": "pages/home/index","style": {"navigationBarTitleText": "home"}},{"path": "pages/mine/index","style": {"navigationBarTitleText": "mine"}},{"path": "pages/car/index","style": {"navigationBarTitleText": "car"}}],"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "uni-app","navigationBarBackgroundColor": "#F8F8F8","backgroundColor": "#F8F8F8"},"uniIdRouter": {},"tabBar": {"list": [{"pagePath": "pages/home/index"},{"pagePath": "pages/mine/index"},{"pagePath": "pages/car/index"}]}
}

原文鏈接：https://blog.csdn.net/weixin_47190975/article/details/129353819

親測有效，另外，點擊退出后重新登錄跳轉首頁activeIndex不會自動切換（即tab欄激活項未切換），在登錄成功跳轉首頁前添加this.changeIndex(0)即可