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