微信小程式自訂底部導覽列怎麼實現？以下這篇文章為大家介紹一下自訂底部導覽列的具體實作方法，希望對大家有幫助！
微信支援自訂導覽列來實現靈活的底部導覽欄，在官方文件中給出了簡單的描述，但不是太具體，這裡我透過手把手的具體程式碼實現，來幫助大家完成自訂底部導覽列的具體實現。 【相關學習推薦：小程式開發教學】
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檔案中設定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頁面也是同樣的設置，索引值會依照實際情況跳轉即可。
透過上面程式碼的實現，整個自訂底部導覽列就實現了，其實整體實現還是比較簡單的。讓我們來看下效果
更多程式相關知識，請造訪：程式設計影片！ ！
以上是手把手教你怎麼實作微信小程式自訂底部導覽欄的詳細內容。更多資訊請關注PHP中文網其他相關文章！
