我們是為了實現(xiàn)小程序中多個tabbar的效果的。用戶進首頁的時候，是一個tabbar，在進入到另外的頁面的時候，底部的tabbar顯示的是另外的一個。這樣可以更好的讓用戶瀏覽到不同的內(nèi)容。有點類似于一個主小程序中嵌套了一個子小程序。

現(xiàn)有的一些方案

我們在做這個之前，是有看過其它小程序做的一些效果的。比如小米lite和攜程的小程序。

他們的實現(xiàn)的方式是一樣的，就是做一個tabbar的自定義組件,然后跳轉(zhuǎn)每個頁面的時候用wx.navigateTo方法去跳轉(zhuǎn)。這樣是能實現(xiàn)多個tabbar的，當然也是有一些問題的，因為 navigateTo和switchTab的頁面加載效果是不一樣的。navigateTo是有一個頁面的過渡效果的，有一個新頁面整體從右側(cè)滑出的動畫。但是switchTab是直接出頁面的。因為在tabbar上的頁面，往往就是需要經(jīng)常打開的頁面，如果有一個跳轉(zhuǎn)頁面的滑出動畫是會影響用戶體驗的。所以我們把這個方案做為了一個備選方案。

我們采用的方案

其實微信官方是有一個自定義tabbar的，我們的方案是基于官方的自定義tabbar完成的。

我們新建一個js文件用來管理多個tabbar的狀態(tài)。在router層做了判斷，當進入需要顯示另一個tabbar的時候，改變這個全局的狀態(tài)，并且setdata讓新的tabbar顯示在視圖層上。就是要中心化的管理tabbar的狀態(tài)。

遇到的問題與解決方法

必須在根目錄下的指定文件夾

這個自定義tabbar組件必須放在根目錄的custom-tab-bar 文件夾下。這樣才能被識別。

tabbar上下跳動

當我第一次把官方的例子稍加修改，移植到我們的小程序上的時候，發(fā)現(xiàn)tabbar會在真機上，在點擊tabbar上圖標的時候，上下跳動。當時也差點因為這個原因放棄這個方案。然后在之后的摸索中發(fā)現(xiàn)，官方的例子用的是<cover-view>和<cover-image>，改成<view>和<image>標簽以后,就沒有這種跳動了。當然換為view和image的后，層級會變低，所以要記得給tabbar設置高的層級，否則會被別的內(nèi)容擋到。

iphonex以上手機底部tab適配

iphonex以上手機因為底部有一個小橫條，所以iPhonex以上手機的tabbar的高度是比較高和其它的手機是不一樣的。微信小程序原生的tabbar是有這個高度適配的，但是如果換成自定義的tabbar就需要自己適配了。需要自己做一下高度的適配。而且要注意一下開發(fā)者工具和真實機型的差距。開發(fā)者工具顯示iphonex上的tabbar的樣子并不是真實機型中看到的，需要注意一下。

tabbar上item數(shù)量或小紅點

以前在用原生tabbar的時候，有微信的api可以全局的改變某個item上面的數(shù)字和小紅點。這樣在做像購物車上小紅點數(shù)量改變的時候就可以用這個api。但是在使用了自定義tabbar的時候，就需要自己更新item上的數(shù)量或小紅點了。而且是全局更新，因為可能在沒有tabbar的頁面也需要更新。為了實現(xiàn)全局更新，開始沒有想到很好的辦法，最開始是把tabbar這個組件的setdata方法存到app.js中，然后在需要更新的時候調(diào)用setdata。但是這個方法不太好，之后在跟組長討論后，提示可以用eventhub了。在tabbar的js中來監(jiān)聽數(shù)量的改變，在需要改變數(shù)量的地方，觸發(fā)這個event，這樣就實現(xiàn)了全局的數(shù)量更新。

switchtab加參數(shù)

因為我們的頁面在tabbar上面，只能用switchtab的方法去跳轉(zhuǎn)到這個頁面，但是小程序的switchtab方法是無法帶參數(shù)的（我其實不太理解為什么不能帶參數(shù)，但是從二維碼或者分享進入tabbar上的頁面，又是可以帶參數(shù)的），我們采用的方法是我們有一個router工具，當檢測到要跳到需要帶參數(shù)的頁面的時候，就把解析到的參數(shù)加到storage中，然后在頁面的onshow的方法中獲取。

小程序的基礎庫問題

自定義tabbar支持的小程序基礎庫版本是2.5.0,所以我們需要注意一下老基礎庫版本的兼容性問題。在低基礎庫的小程序上，自定義tabbar是可以在小程序的后臺設置最低的基礎庫要求。

tabbar閃動

因為在切換tab的時候，必須setdata，所以肯定有閃動的，這個目前還沒有找到很好的辦法。

最后

小程序自定義tabbar這個特性，感覺使用的小程序也不是很多。我們先進行了一些踩坑，也希望可以幫到使用這個特性的小程序。

作者：努力的Jerry
來源：掘金
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。