手把手教你怎么實現微信小程序自定義底部導航欄

微信小程序自定義底部導航欄怎么實現？下面本篇文章給大家介紹一下自定義底部導航欄的具體實現方法，希望對大家有所幫助！

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

引入colorui

https://github.com/weilanwl/ColorUI

訪問該網址，將colorui組件庫下載下來

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

設置引入

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

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

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

創建自定義底部導航欄組件

我們首先創建一個自定義組件文件夾**custom-tab-bar，**切記，自定義底部導航欄的文件夾名必須是這個，不能改成別的，否則小程序是識別不了的。

接著我們在Pages下面創建兩個頁面(home,my)，用來當作導航欄的兩個切換頁面

app.json文件設置

不使用小程序默認的導航欄設置，就需要在app.json文件中設置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也是需要設置的，list中pagePath就配置你需要配置的tab具體頁面，這里我只設置了兩個tab，所以就配了兩個，配置了幾個就要在這配幾個，一個都不能少，list除了pagePath，其他字段可根據自己的需要進行增減。

編寫導航欄具體代碼邏輯

導航欄組件具體實現

1、組件初始數據設置

**// custome-tab-bar/index.js** /**    * 組件的初始數據    */   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中的設置大致差不多，但是真正的list數據其實取得是這里的，而不會去取app.json的，這就是實現自定義組件的關鍵，所以大家可能就有疑問，既然用不到app.json，為什么還要在app.json中設置，我這里查了下，這是小程序的規范要求，我們只能遵從。

2、組件導航欄頁面代碼實現

<!--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的樣式，我們根據list每條數據的索引位與選中的值進行比較來做到按鈕的樣式切換效果，通過switchTab切換事件來實現tab頁的切換。

3、組件切換事件代碼實現

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

調用微信提供的wx.switchTab方法完成url跳轉，同時記錄當時選中的索引值。

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

4、tab具體頁面代碼實現

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

通過onShow的頁面生命周期函數來設置selected的值，因為我的頁面是第二個tab，所以索引值設置為1.自定義組件 微信有新增 getTabBar 接口，可獲取當前頁面下的自定義 tabBar 組件實例，就可以設置組件中selected的值。home頁面也是同樣的設置，索引值根據實際情況跳轉一下即可。

最終效果呈現

通過上面代碼的實現，整個自定義底部導航欄就實現了，其實整體實現還是比較簡單的。讓我們來看下效果