小程序自定義tabbar踩坑記

小程序爲何要用自定義tabbar?

咱們是爲了實現小程序中多個tabbar的效果的。用戶進首頁的時候，是一個tabbar，在進入到另外的頁面的時候，底部的tabbar顯示的是另外的一個。這樣能夠更好的讓用戶瀏覽到不一樣的內容。有點相似於一個主小程序中嵌套了一個子小程序。html

現有的一些方案

咱們在作這個以前，是有看過其它小程序作的一些效果的。好比小米lite和攜程的小程序。小程序

他們的實現的方式是同樣的，就是作一個tabbar的自定義組件,而後跳轉每一個頁面的時候用wx.navigateTo方法去跳轉。這樣是能實現多個tabbar的，固然也是有一些問題的，由於 navigateTo和switchTab的頁面加載效果是不同的。navigateTo是有一個頁面的過渡效果的，有一個新頁面總體從右側滑出的動畫。可是switchTab是直接出頁面的。由於在tabbar上的頁面，每每就是須要常常打開的頁面，若是有一個跳轉頁面的滑出動畫是會影響用戶體驗的。因此咱們把這個方案作爲了一個備選方案。微信小程序

咱們採用的方案

其實微信官方是有一個自定義tabbar的，咱們的方案是基於官方的自定義tabbar完成的。自定義tabbar的地址：developers.weixin.qq.com/miniprogram… （在看下面的文章以前，能夠先看一下這個例子）剛開始看，感受實施起來並不難，並且官方還提供了一個簡單的代碼片斷，可是在這個過程當中，遇到了一些問題，如下是記錄遇到的問題和解決方法。api

咱們新建一個js文件用來管理多個tabbar的狀態。在router層作了判斷，當進入須要顯示另外一個tabbar的時候，改變這個全局的狀態，而且setdata讓新的tabbar顯示在視圖層上。就是要中心化的管理tabbar的狀態。微信

遇到的問題與解決方法

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

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

tabbar上下跳動

當我第一次把官方的例子稍加修改，移植到咱們的小程序上的時候，發現tabbar會在真機上，在點擊tabbar上圖標的時候，上下跳動。當時也差點由於這個緣由放棄這個方案。而後在以後的摸索中發現，官方的例子用的是<cover-view>和<cover-image>，改爲<view>和<image>標籤之後,就沒有這種跳動了。固然換爲view和image的後，層級會變低，因此要記得給tabbar設置高的層級，不然會被別的內容擋到。app

iphonex以上手機底部tab適配

iphonex以上手機由於底部有一個小橫條，因此iPhonex以上手機的tabbar的高度是比較高和其它的手機是不同的。微信小程序原生的tabbar是有這個高度適配的，可是若是換成自定義的tabbar就須要本身適配了。須要本身作一下高度的適配。並且要注意一下開發者工具和真實機型的差距。開發者工具顯示iphonex上的tabbar的樣子並非真實機型中看到的，須要注意一下。iphone

tabbar上item數量或小紅點

之前在用原生tabbar的時候，有微信的api能夠全局的改變某個item上面的數字和小紅點。這樣在作像購物車上小紅點數量改變的時候就能夠用這個api。可是在使用了自定義tabbar的時候，就須要本身更新item上的數量或小紅點了。並且是全局更新，由於可能在沒有tabbar的頁面也須要更新。爲了實現全局更新，開始沒有想到很好的辦法，最開始是把tabbar這個組件的setdata方法存到app.js中，而後在須要更新的時候調用setdata。可是這個方法不太好，以後在跟組長討論後，提示能夠用eventhub了。在tabbar的js中來監聽數量的改變，在須要改變數量的地方，觸發這個event，這樣就實現了全局的數量更新。工具

switchtab加參數

由於咱們的頁面在tabbar上面，只能用switchtab的方法去跳轉到這個頁面，可是小程序的switchtab方法是沒法帶參數的（我其實不太理解爲何不能帶參數，可是從二維碼或者分享進入tabbar上的頁面，又是能夠帶參數的），咱們採用的方法是咱們有一個router工具，當檢測到要跳到須要帶參數的頁面的時候，就把解析到的參數加到storage中，而後在頁面的onshow的方法中獲取。oop

小程序的基礎庫問題

自定義tabbar支持的小程序基礎庫版本是2.5.0,因此咱們須要注意一下老基礎庫版本的兼容性問題。在低基礎庫的小程序上，自定義tabbar是能夠在小程序的後臺設置最低的基礎庫要求。

tabbar閃動

由於在切換tab的時候，必須setdata，因此確定有閃動的，這個目前尚未找到很好的辦法。

最後

小程序自定義tabbar這個特性，感受使用的小程序也不是不少。咱們先進行了一些踩坑，也但願能夠幫到使用這個特性的小程序。