微信小程序自定義底部導航欄怎么實現?下面本篇文章給大家介紹一下自定義底部導航欄的具體實現方法,希望對大家有所幫助!
微信支持自定義導航欄來實現靈活的底部導航欄,在官方文檔中給出了簡單的描述,但不是太具體,這里我通過手把手的具體代碼實現,來幫助大家完成自定義底部導航欄的具體實現?!鞠嚓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頁面也是同樣的設置,索引值根據實際情況跳轉一下即可。
最終效果呈現
通過上面代碼的實現,整個自定義底部導航欄就實現了,其實整體實現還是比較簡單的。讓我們來看下效果