最近開發(fā)微信小程序,公司要求做一個(gè)類似閑魚的tabbar,但是網(wǎng)上大多資料的tabbar都會(huì)在頁(yè)面切換的時(shí)候重新渲染,所以我寫了一個(gè)不會(huì)重新渲染的tabbar,有需要的直接拿走不謝。https://github.com/SuRuiGit/wxapp-customTabbar
創(chuàng)新互聯(lián)公司是一家以成都網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)、品牌設(shè)計(jì)、軟件運(yùn)維、成都網(wǎng)站推廣、小程序App開發(fā)等移動(dòng)開發(fā)為一體互聯(lián)網(wǎng)公司。已累計(jì)為廣告制作等眾行業(yè)中小客戶提供優(yōu)質(zhì)的互聯(lián)網(wǎng)建站和軟件開發(fā)服務(wù)。在小程序的開發(fā)文檔中,對(duì)tabbar是這樣說明的:
如果小程序是一個(gè)多 tab 應(yīng)用(客戶端窗口的底部或頂部有 tab 欄可以切換頁(yè)面),可以通過 tabBar 配置項(xiàng)指定 tab 欄的表現(xiàn),以及 tab 切換時(shí)顯示的對(duì)應(yīng)頁(yè)面。
Tip:
1.當(dāng)設(shè)置 position 為 top 時(shí),將不會(huì)顯示 icon
2.tabBar 中的 list 是一個(gè)數(shù)組,只能配置最少2個(gè)、最多5個(gè) tab,tab 按數(shù)組的順序排序。
在實(shí)際開發(fā)過程中,小程序自帶的tabbar樣式并不能滿足設(shè)計(jì)提供的開發(fā)需求,所以需要我們自定義一套屬于自己的tabbar。
使用步驟如下:
第一步:找到項(xiàng)目中的tabbarComponent目錄,拷貝到你的工程中,然后將tabbarComponent->icon圖標(biāo)替換成你自己的tabbar圖片
第二步:到app.json中配置tabBar,這里我就不細(xì)說了,只強(qiáng)調(diào)閑魚的tabbar中間的按鈕是跳到二級(jí)頁(yè)面,所以不配置在tabBar的list中
第三步:在app.js的onLaunch方法中調(diào)用wx.hideTabBar();隱藏系統(tǒng)自帶的tabBar
第四步:在app.js中的globalData中加入自定義tabbar的參數(shù),再加入一個(gè)方法給tabBar.list配置中的頁(yè)面使用,代碼如下
globalData: { userInfo: null, tabBar: { "backgroundColor": "#ffffff", "color": "#979795", "selectedColor": "#1c1c1b", "list": [ { "pagePath": "/page/index/index", "iconPath": "icon/icon_home.png", "selectedIconPath": "icon/icon_home_HL.png", "text": "首頁(yè)" }, { "pagePath": "/page/myRelease/index", "iconPath": "icon/icon_release.png", "isSpecial": true, "text": "發(fā)布" }, { "pagePath": "/page/mine/index", "iconPath": "icon/icon_mine.png", "selectedIconPath": "icon/icon_mine_HL.png", "text": "我的" } ] } }