微信小程序自定義tabBar的步驟記錄
1、前言
很多時候，小程序自帶的tabBar不能夠滿足項目需求，這個時候就需要我們自定義tabBar了。但是在網(wǎng)上找了很久，基本都是存在切換時閃爍的問題。幸運的是從基礎(chǔ)庫2.5.0開始，可以官方使用自定義tabBar了。
2、自定義tabBar樣式
如下圖所示，我們需要一個展示“首頁”、“我的”，和一個可以點擊跳轉(zhuǎn)到發(fā)布的tabBar。這種樣式，原生的就無法滿足需求了，只能自定義tabBar了。
3、引入custom-tab-bar及相關(guān)配置
3.1、如下圖所示，將custom-tab-bar【下載】導(dǎo)入項目根目錄，
3.2、在app.json中配置好切換的tabbar，并設(shè)置"custom": true，然后將基礎(chǔ)庫設(shè)置成2.5.0
3.3、使用自定義TabBar，在切換的TabBar界面的onShow中添加如下代碼。如首頁中設(shè)置 selected: 0，我的中設(shè)置 selected: 2。因為 selected: 1 是特殊跳轉(zhuǎn)，點擊加號圖標(biāo)時，不再是切換tabbar，而是直接跳轉(zhuǎn)發(fā)布界面了。
/**
* 生命周期函數(shù)--監(jiān)聽頁面顯示
*/
onShow: function () {
if (typeof this.getTabBar === 'function' &&
this.getTabBar()) {
console.log('設(shè)置選中項 0')
this.getTabBar().setData({
selected: 0
})
}
},
4、完整Demo
真機測試可用，使用也非常的簡單?！?a rel="external nofollow" target="_blank" >完整Demo下載地址】
總結(jié)
到此這篇關(guān)于微信小程序如何自定義tabBar的文章就介紹到這了,更多相關(guān)小程序自定義tabBar內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
BootStrap Validator使用注意事項(必看篇)
針對bootstrap2和bootstrap3有不同的版本，在使用bootstrap validator時需要了解其注意事項，下面小編把我遇到的注意事項分享給大家，供大家參考2016-09-09
經(jīng)典的間隔時間滾動新聞（圖片），可控制滾動 其實這個也挺多網(wǎng)站用到的，簡單又實用。(2010-05-05
在前端開發(fā)中,遍歷頁面中的所有元素是一個常見需求,無論是調(diào)試、頁面分析,還是獲取元素信息,都會用到遍歷 DOM 樹的操作,本文將介紹如何通過 JavaScript 編寫一個方法,遍歷并輸出頁面中的所有元素,需要的朋友可以參考下2024-12-12
微信小程序基于ColorUI構(gòu)建皮皮蝦短視頻去水印組件
這篇文章主要介紹了微信小程序-基于ColorUI構(gòu)建皮皮蝦短視頻去水印組件，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧2020-11-11
JavaScript中的函數(shù)聲明和函數(shù)表達(dá)式區(qū)別淺析
這篇文章主要介紹了JavaScript中的函數(shù)聲明和函數(shù)表達(dá)式區(qū)別淺析,本文總結(jié)的淺顯易懂,非常好的一篇技術(shù)文章,需要的朋友可以參考下2015-03-03
兩種常用的javascript數(shù)組去重方法思路及代碼
第一種是常規(guī)的方法:建一個新的數(shù)組存放結(jié)果,for循環(huán)中每次從原數(shù)組中取出一個元素，用indexOf查找新數(shù)組中是否有該元素，至于第二種詳細(xì)的看下本文哦2013-03-03
JavaScript Array擴(kuò)展實現(xiàn)代碼
最近看了一下developer.mozilla.org里的東西，發(fā)現(xiàn)它為Array對象添加了不少generic method，趕得上Prototype的熱心程度。2009-10-10
npm安裝依賴時出現(xiàn)Peer Dependencies沖突報錯解決分析
這篇文章主要為大家介紹了npm安裝依賴時出現(xiàn)Peer Dependencies沖突報錯解決分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09
這篇文章主要介紹了canvas 畫布在主流瀏覽器中的尺寸限制詳細(xì)介紹的相關(guān)資料,canvas在不同瀏覽器下面有不同的最大尺寸限制，這里測試下，需要的朋友可以參考下2016-12-12
input 標(biāo)簽實現(xiàn)輸入框帶提示文字效果(兩種方法)
這篇文章主要介紹了input 標(biāo)簽實現(xiàn)輸入框帶提示文字效果(兩種方法),需要的朋友可以參考下2017-10-10