小程序底部tabbar方案總結

若是你作太小程序，那你必定能體會到寫小程序tabbar的痛苦

若是你沒作過，那能夠告訴你，就是一坨x。但話也說回來了，也不能全怪他(微信)。。。

1、原生方案

小程序原生是提供了tabbar功能的，也有必定的定製化能力

具體也分爲兩種方法：

一、配置文件配置

官方配置文檔：developers.weixin.qq.com/miniprogram…

在全局配置文件中作以下配置：

配置文件在原生小程序框架中是src目錄下app.json文件，在taro框架下是src目錄下的app.config.ts文件。還有一點須要注意，配置圖標圖片路徑，必須是本地路徑，不能是cdn

缺陷：

1）圖片只能是本地路徑，也就是說圖片必須在項目裏，對於打包體積異常敏感的小程序來講，這不是一個很好的方案

2）可定製化程度很低，每一個icon的大小，文字顏色。都比較固定，若是有需求是要在tabbar中有凸起的icon，就沒轍了

二、使用wx.settabbaritem方法配置

其實和使用配置文件配置原理是同樣的，缺陷也同樣

官方使用文檔：developers.weixin.qq.com/miniprogram…

小結：使用原生方法有不少好處，好比反應快速、加載快、配置方便，因此其實不少大廠的小程序都採用了原生方式。可是本小程序還有一種場景，就是在剛進入頁面時，須要經過接口判斷是否要顯示tabbar，也就是說，在接口未返回前，是不能顯示tabbar的，必需要使用wx.hidetabbar方法隱藏tabbar，可是這樣又會帶來一個新的問題，安卓機每次頁面刷新的時候屏幕會閃一下。這是官方api的問題，目前官方尚未修復。。。說個題外話，最好也別期望官方developers.weixin.qq.com/community/d…

2、自定義tabbar

這裏說的自定義，也不是徹底的自定義，而是在官方提供的方案下進行，有種帶着鐐銬跳舞的感受。具體方法：developers.weixin.qq.com/miniprogram…

taro框架下方法略有不一樣，本小程序使用了taro框架，因此詳細講一下

一、配置文件

首先要將配置文件中關於icon文案的配置刪除，已經沒有做用了，刪減後的配置文件以下

src目錄下的app.json.ts文件

list配置項依然須要保留，告訴小程序哪些頁面須要使用tabbar

二、tabbar組件

最核心的步驟，tabbar組件書寫。在src目錄下新建custom-tab-bar目錄，其下新建index.tsx和index.module.scss文件，寫樣式和邏輯

html部分:

css部分：

js部分:

缺陷：

你可能注意到了，更改tabbar當前選中項的方法很奇怪，爲何不直接用usestate的setindex修改，而是使用發佈-訂閱模式修改狀態。。。

這是由於這裏有小程序的另外一個暗坑，使用wx.switchtab方法進入頁面時，tabbar都是一個新的實例

看到了嗎，官方的說法。就是說，每次一個新的tabbar頁面，都要把tabbar的當前索引從新設置值。就像這樣

覺得完美了？太年輕，還有坑。由於每次是一個新的tabbar實例，因此在第一次進入頁面時，tabbar也會跟着從新繪製一次。這個問題目前是無解的developers.weixin.qq.com/community/d…。但跟其餘的問題相比，這點瑕疵仍是能夠接受

3、徹底自定義

理想中的完美方案，徹底放棄官方的那一套。。。本身作一個tabbar。可行嗎？可行，難作也是真的

寫樣式並不難。難點在於，怎樣緩存頁面節點。好比tabbar對應的兩個頁面A和B，在頁面A加載完成後，點擊tabbar，切到B頁面。再次點擊tabbar，切回A頁面。若是不作任何特殊處理，是會從新加載A頁面的。這顯然是不符合用戶習慣的，咱們想要的是展現以前緩存的A頁面。因此怎樣緩存A頁面，就成了關鍵。react有這樣的第三方組件，好比react-keep-alive，vue中有自然的keep-alive這個功能實現。都不是問題。但這些庫和方法都是不能用的，須要本身實現一下，有些麻煩。須要緩存虛擬dom。有時間能夠整一整