原博：https://juejin.cn/post/7365533404790341651

在開發(fā)微信小程序，通常會(huì)使用uniapp自帶的tabBar實(shí)現(xiàn)底部圖標(biāo)和導(dǎo)航，但現(xiàn)實(shí)有少量應(yīng)用使用uniapp自帶的tabBar無法滿足需求，這時(shí)需要自定義底部tabBar功能。 例如下圖的需求，在中間添加一個(gè)加號(hào)，例如根據(jù)不同登錄的角色顯示不同的tabBar按鈕等，這些功能在無法通過 uniapp自帶的tabBar實(shí)現(xiàn)所以需要寫相關(guān)組件邏輯。

常規(guī)tabBar

常規(guī)實(shí)現(xiàn)底部導(dǎo)航的效果，可以參考官方文檔 uniapp添加tabBar官方文檔地址：?uniapp.dcloud.net.cn/collocation…

下面將下圖為示例寫部分代碼案例： 在pages.json寫上tabBar 并在List定義好每個(gè)頁面與頁面展示圖標(biāo)，以及不同選中時(shí)圖標(biāo)的效果，就可以實(shí)現(xiàn)下面頁面展示的樣式：

?案例代碼：?注意導(dǎo)航頁的圖標(biāo)和頁面都必須在根路徑下面，因此不能使用網(wǎng)絡(luò)地址，或分包下的圖片和頁面。

 "tabBar": {"color": "#bababa","selectedColor": "#000000","borderStyle": "black","backgroundColor": "#ffffff","list": [{"pagePath": "pages/tabbar/index/index","iconPath": "static/images/common/shouye.png","selectedIconPath": "static/images/common/shouye-xz.png","text": "首頁"},{"pagePath": "pages/talent/index","iconPath": "static/images/common/task.png","selectedIconPath": "static/images/common/task_d.png","text": "達(dá)人任務(wù)"},{"pagePath": "pages/tabbar/facilitator/facilitator","iconPath": "static/images/common/facilitator.png","selectedIconPath": "static/images/common/facilitator_d.png","text": "服務(wù)商"},{"pagePath": "pages/aiTools/aiTools","iconPath": "static/images/common/aitools.png","selectedIconPath": "static/images/common/aitools_d.png","text": "創(chuàng)作助手"},{"pagePath": "pages/tabbar/info/info","iconPath": "static/images/common/info.png","selectedIconPath": "static/images/common/info_d.png","text": "我的"}]},

自定義tabBar

梳理業(yè)務(wù)：

1. 去除pages.json寫上tabBar注釋相關(guān)代碼;
2. 通過uni.hideTabBar();隱藏uniapp自帶的tabBar;
3. 自定義tabBar組件，實(shí)現(xiàn)頁面相關(guān)邏輯;
4. 在相關(guān)頁面引入該組件;
5. 根據(jù)在頁面的onShow方法，當(dāng)頁面顯示通過$ref，調(diào)用相關(guān)邏輯，判斷需要顯示的底部tabBar按鈕和樣式。

下面將以下圖為案例寫相關(guān)邏輯：

1. 去除pages.json寫上tabBar注釋相關(guān)代碼，圖上寫了一個(gè)list.pagePath 主要的作用是占位，沒別的意義

2.封裝tabBar.vue組件

ps：我在components\tabbar\tabbar.vue路徑下封裝tabBar.vue組件，其他的小伙伴可以根據(jù)自己的頁面需求寫在對(duì)應(yīng)位置，例如想實(shí)現(xiàn)首頁點(diǎn)擊進(jìn)入不同的分包和頁面展示不同的tabBar，那么可以根據(jù)自己的需求進(jìn)行調(diào)整。

?

<template><view class="tabbar"><view class="tabbar-item" v-for="(item, index) in list" :key="index" @click="changeTab(index)"><template v-if="index != 2"><view class="select" v-if="current == index"><view><view class="i-t position"><image class="img imgactive" mode="widthFix" :src="item.selectedIconPath"v-if="current == index"></image><image class="img" mode="widthFix" :src="item.iconPath" v-else></image><view class="text active" v-if="current == index">{{ item.text }}</view><view class="text" v-else>{{ item.text }}</view></view></view></view><view v-else><view class="i-t"><image class="img" mode="widthFix" :src="item.selectedIconPath" v-if="current == index"></image><image class="img" mode="widthFix" :src="item.iconPath" v-else></image><view class="text active" v-if="current == index">{{ item.text }}</view><view class="text" v-else>{{ item.text }}</view></view></view></template><!-- 下面是為了解決自定義業(yè)務(wù)需求，如果is_identity = 3則顯示中間的加號(hào)，不然顯示服務(wù)商 --><template v-else><view class="i-t" v-if="is_identity == 3" ><image class="img" mode="widthFix" :src="urladdTask" style="width: 140rpx;height: 140rpx;position: absolute;top: -50rpx;"></image></view><view class="i-t" v-else><view class="select" v-if="current == index"><view><view class="i-t position"><image class="img imgactive" mode="widthFix" :src="item.selectedIconPath"v-if="current == index"></image><image class="img" mode="widthFix" :src="item.iconPath" v-else></image><view class="text active" v-if="current == index">{{ item.text }}</view><view class="text" v-else>{{ item.text }}</view></view></view></view><view v-else><view class="i-t"><image class="img" mode="widthFix" :src="item.selectedIconPath" v-if="current == index"></image><image class="img" mode="widthFix" :src="item.iconPath" v-else></image><view class="text active" v-if="current == index">{{ item.text }}</view><view class="text" v-else>{{ item.text }}</view></view></view></view></template></view></view>
</template><script>
//引入圖片資源
import addTask from '../../static/images/common/addTask.png'
export default {name: "tabbar",props: ['current'],data() {return {urladdTask: addTask,is_identity: 0,// TODO: 下面list則是你頁面上具體展示的底部按鈕，根據(jù)你的需求和頁面進(jìn)行調(diào)整list: [{"pagePath": "pages/tabbar/index/index","iconPath": "../../static/images/common/shouye.png","selectedIconPath": "../../static/images/common/shouye-xz.png","text": "首頁"},{"pagePath": "pages/talent/index","iconPath": "../../static/images/common/task.png","selectedIconPath": "../../static/images/common/task_d.png","text": "達(dá)人任務(wù)"},{"pagePath": "pages/tabbar/facilitator/facilitator","iconPath": "../../static/images/common/facilitator.png","selectedIconPath": "../../static/images/common/facilitator_d.png","text": "服務(wù)商"},{"pagePath": "pages/aiTools/aiTools","iconPath": "../../static/images/common/aitools.png","selectedIconPath": "../../static/images/common/aitools_d.png","text": "創(chuàng)作助手"},{"pagePath": "pages/tabbar/info/info","iconPath": "../../static/images/common/info.png","selectedIconPath": "../../static/images/common/info_d.png","text": "我的"}]}},created() {//隱藏tabbaruni.hideTabBar();},mounted() {},methods: {changeTab(e) {uni.switchTab({url: '/' + this.list[e].pagePath,})}}}</script><style>
.tabbar {font-size: 1.5vh;position: fixed;left: 0;bottom: 0;z-index: 99;width: 100%;height: 6vh;display: grid;grid-template-columns: repeat(5, 1fr);align-items: center;justify-content: space-around;background-color: #fff;padding: 20rpx 0;
}.tabbar-item {height: 100%;display: flex;align-items: center;justify-content: center;position: relative;
}
.img {height: 3vh;width: 2.5vh;
}
.text {text-align: center;color: #CACACA;
}
.i-t {display: flex;flex-direction: column;justify-items: center;align-items: center;
}
.select {position: relative;
}.text.active {color: red;
}
.index0 {width: 80rpx;height: 80rpx;
}
</style>

1. 組件封裝完畢需要在對(duì)應(yīng)的頁面中引入該組件 例如 下面index.vue

2. </template></view>//current則表示選中的狀態(tài)，例如當(dāng)前是首頁則current為0,如果是第三頁則current=2<tabbar current="0" ref="mytabbar"></tabbar></view>
   </template><script>import tabbar from '@/components/tabbar/tabbar.vue';
   export default {components: {tabbar},
   }
   

3. 在tabBar.vue組件寫上相關(guān)頁面判斷，例如不同的角色則顯示不同的按鈕，或不同樣式。?tabBar.vue組件中的methods添加一個(gè)init函數(shù)：

4.     init() {//獲取用戶信息let userinfo = uni.getStorageSync('user');// 獲取角色狀態(tài)，賦值給is_identityif (userinfo) {this.is_identity = userinfo?.identity;}//...其他調(diào)接口等業(yè)務(wù)處理}
   

   在第三步的index.vue頁面中，引入的tabbar組件定義了一個(gè)ref="mytabbar"，可以通過this.$refs.tabBar.init();的方式來調(diào)用tabBar.vue組件中的methods的init函數(shù)。 例如在index.vue組件下的onShow方法下，當(dāng)頁面顯示時(shí)候執(zhí)行tabBar.vue組件中的methods的init函數(shù)

       async onShow() {await this.getuserinfo();//其他業(yè)務(wù)},