微信小程序自定義底部導(dǎo)航欄怎么實(shí)現(xiàn)？下面本篇文章給大家介紹一下自定義底部導(dǎo)航欄的具體實(shí)現(xiàn)方法，希望對(duì)大家有所幫助！

微信支持自定義導(dǎo)航欄來實(shí)現(xiàn)靈活的底部導(dǎo)航欄，在官方文檔中給出了簡(jiǎn)單的描述，但不是太具體，這里我通過手把手的具體代碼實(shí)現(xiàn)，來幫助大家完成自定義底部導(dǎo)航欄的具體實(shí)現(xiàn)?！鞠嚓P(guān)學(xué)習(xí)推薦：小程序開發(fā)教程】

引入colorui

https://github.com/weilanwl/ColorUI

訪問該網(wǎng)址，將colorui組件庫下載下來

下載下來后，將demo文件夾中的colorui文件夾放入你的小程序項(xiàng)目中

設(shè)置引入

@import 'colorui/main.wxss'; @import 'colorui/icon.wxss'; @import 'colorui/animation.wxss';

將上面這段代碼放入app.wxss文件中（上面代碼路徑根據(jù)自己實(shí)際路徑填寫）

colorui就引入成功了，我這里是使用colorui的樣式組件，其實(shí)用別的也一樣，或者自己寫底部導(dǎo)航欄的樣式都可以

創(chuàng)建自定義底部導(dǎo)航欄組件

我們首先創(chuàng)建一個(gè)自定義組件文件夾**custom-tab-bar，**切記，自定義底部導(dǎo)航欄的文件夾名必須是這個(gè)，不能改成別的，否則小程序是識(shí)別不了的。

接著我們?cè)赑ages下面創(chuàng)建兩個(gè)頁面(home,my)，用來當(dāng)作導(dǎo)航欄的兩個(gè)切換頁面

app.json文件設(shè)置

不使用小程序默認(rèn)的導(dǎo)航欄設(shè)置，就需要在app.json文件中設(shè)置tabBar的custom的屬性為true

具體代碼如下：

"tabBar": {     "custom": true,     "list": [       {         "pagePath": "pages/home/home",         "text": "首頁",         "iconPath": "images/icon/basics.png",         "selectedIconPath": "images/icon/basics_cur.png"       },       {         "pagePath": "pages/my/my",         "text": "我的",         "iconPath": "images/icon/component.png",         "selectedIconPath": "images/icon/component_cur.png"       }     ]   },

在這里需要注意的是，list也是需要設(shè)置的，list中pagePath就配置你需要配置的tab具體頁面，這里我只設(shè)置了兩個(gè)tab，所以就配了兩個(gè)，配置了幾個(gè)就要在這配幾個(gè)，一個(gè)都不能少，list除了pagePath，其他字段可根據(jù)自己的需要進(jìn)行增減。

編寫導(dǎo)航欄具體代碼邏輯

導(dǎo)航欄組件具體實(shí)現(xiàn)

1、組件初始數(shù)據(jù)設(shè)置

**// custome-tab-bar/index.js** /**    * 組件的初始數(shù)據(jù)    */   data: {     selected: 0,     list: [{         "pagePath": "/pages/home/home",         "text": "首頁",         "iconPath": "/images/icon/basics.png",         "selectedIconPath": "/images/icon/basics_cur.png"       },       {         "pagePath": "/pages/my/my",         "text": "我的",         "iconPath": "/images/icon/component.png",         "selectedIconPath": "/images/icon/component_cur.png"       }     ]   }

這里可以看到和app.json中的設(shè)置大致差不多，但是真正的list數(shù)據(jù)其實(shí)取得是這里的，而不會(huì)去取app.json的，這就是實(shí)現(xiàn)自定義組件的關(guān)鍵，所以大家可能就有疑問，既然用不到app.json，為什么還要在app.json中設(shè)置，我這里查了下，這是小程序的規(guī)范要求，我們只能遵從。

2、組件導(dǎo)航欄頁面代碼實(shí)現(xiàn)

<!--custom-tab-bar/index.wxml--> <view class="cu-bar tabbar">   <view wx:for="{{list}}" wx:key="index" class="action" data-index="{{index}}" data-path="{{item.pagePath}}" bindtap="switchTab">     <view class="cuIcon-cu-image">       <image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></image>     </view>     <view class="text-green">{{item.text}}</view>   </view> </view>

這里是使用的colorui的樣式，我們根據(jù)list每條數(shù)據(jù)的索引位與選中的值進(jìn)行比較來做到按鈕的樣式切換效果，通過switchTab切換事件來實(shí)現(xiàn)tab頁的切換。

3、組件切換事件代碼實(shí)現(xiàn)

/**    * 組件的方法列表    */   methods: {     switchTab(e) {       const data = e.currentTarget.dataset       const url = data.path            wx.switchTab({         url       })       this.setData({         selected: data.index       })     }   }

調(diào)用微信提供的wx.switchTab方法完成url跳轉(zhuǎn)，同時(shí)記錄當(dāng)時(shí)選中的索引值。

寫到這里我們的組件這塊的代碼就寫完了，接著具體頁面也要針對(duì)按鈕切換設(shè)置相應(yīng)邏輯

4、tab具體頁面代碼實(shí)現(xiàn)

// pages/my/my.js /**    * 生命周期函數(shù)--監(jiān)聽頁面顯示    */   onShow: function () {     console.log("onShow")     if (typeof this.getTabBar === 'function' && this.getTabBar()) {       this.getTabBar().setData({         selected: 1       })     }   },

通過onShow的頁面生命周期函數(shù)來設(shè)置selected的值，因?yàn)槲业捻撁媸堑诙€(gè)tab，所以索引值設(shè)置為1.自定義組件 微信有新增 getTabBar 接口，可獲取當(dāng)前頁面下的自定義 tabBar 組件實(shí)例，就可以設(shè)置組件中selected的值。home頁面也是同樣的設(shè)置，索引值根據(jù)實(shí)際情況跳轉(zhuǎn)一下即可。

最終效果呈現(xiàn)

通過上面代碼的實(shí)現(xiàn)，整個(gè)自定義底部導(dǎo)航欄就實(shí)現(xiàn)了，其實(shí)整體實(shí)現(xiàn)還是比較簡(jiǎn)單的。讓我們來看下效果