微信小程序自定義tabBar的步驟記錄
更新時間：2021年08月05日 11:52:07 作者：帥氣的鉛筆
微信小程序開發(fā)越來越多樣化,各種豐富的設計及體驗,自定義tabBar也經常使用,下面這篇文章主要給大家介紹了關于微信小程序如何自定義tabBar的相關資料,需要的朋友可以參考下
1、前言
很多時候，小程序自帶的tabBar不能夠滿足項目需求，這個時候就需要我們自定義tabBar了。但是在網上找了很久，基本都是存在切換時閃爍的問題。幸運的是從基礎庫2.5.0開始，可以官方使用自定義tabBar了。
2、自定義tabBar樣式
如下圖所示，我們需要一個展示“首頁”、“我的”，和一個可以點擊跳轉到發(fā)布的tabBar。這種樣式，原生的就無法滿足需求了，只能自定義tabBar了。
3、引入custom-tab-bar及相關配置
3.1、如下圖所示，將custom-tab-bar【下載】導入項目根目錄，
3.2、在app.json中配置好切換的tabbar，并設置"custom": true，然后將基礎庫設置成2.5.0
3.3、使用自定義TabBar，在切換的TabBar界面的onShow中添加如下代碼。如首頁中設置 selected: 0，我的中設置 selected: 2。因為 selected: 1 是特殊跳轉，點擊加號圖標時，不再是切換tabbar，而是直接跳轉發(fā)布界面了。
/**
* 生命周期函數--監(jiān)聽頁面顯示
*/
onShow: function () {
if (typeof this.getTabBar === 'function' &&
this.getTabBar()) {
console.log('設置選中項 0')
this.getTabBar().setData({
selected: 0
})
}
},
4、完整Demo
真機測試可用，使用也非常的簡單?！?a rel="external nofollow" target="_blank" >完整Demo下載地址】
總結
到此這篇關于微信小程序如何自定義tabBar的文章就介紹到這了,更多相關小程序自定義tabBar內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家詳細介紹了JS實現多物體運動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
這篇文章主要介紹了JS嚴格模式原理與用法,結合實例形式分析了JS嚴格模式基本概念、原理、用法及相關操作注意事項,需要的朋友可以參考下2020-04-04
JavaScript中數組的sort()方法主要用于對數組的元素進行排序。其中，sort()方法有一個可選參數。接下來通過本文給大家介紹數組Array.sort()排序的方法，需要的朋友參考下2017-03-03
replace方法的語法是：stringObj.replace(rgExp, replaceText) 其中stringObj是字符串(string)，reExp可以是正則表達式對象(RegExp)也可以是字符串(string)，replaceText是替代查找到的字符串。。為了幫助大家更好的理解，下面舉個簡單例子說明一下2007-12-12
由于網絡、瀏覽器問題、緩存等原因執(zhí)行js的時候會拋出異常接下來分享一個想法，基本上涉及到兩步：收集和使用，感興趣的你可以參考下哈，希望對你有所幫助2013-03-03
把List集合轉成json格式傳到界面上，這樣js里面操作也簡單，具體的解決方法如下，大家可以參考學習下2014-04-04
這篇文章主要為大家詳細介紹了JavaScript實現九宮格移動拼圖游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了微信小程序畫布顯示圖片繪制矩形選區(qū)效果,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-05-05
javascript createElement()創(chuàng)建input不能設置name屬性的解決方法
今天在使用document.createElement()動態(tài)創(chuàng)建input時，發(fā)現不能為其name賦值，以下是測試代碼。2009-10-10
這篇文章主要介紹了Mint-UI時間組件起始時間問題的解決方法,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-08-08