小程序自定義tabbar

代碼片段： wechatide://minicode/IUoCyemJ7D3d

GitHub: https://github.com/WozHuang/Miniprogram-Demo/tree/master/custom-tabbar

在項目中要求用tabbar，奈何老板嫌微信自帶的tabbar太丑而且功能也不夠豐富，因此需要自定義tabbar，沒辦法就只能自己重新造一個，在造輪子之前從網上找了不少但都是直接使用navigateTo或者redirectTo實現跳轉功能，每次都重新加載一下頁面實在是受不了。

在細讀了微信的api文檔后發現能夠使用hideTabBar這個方法將原有的tabbar隱藏掉，這樣只要自己重新寫一個tabbar就可以了

實現原理

1. 利用 wx.hideTabBar({aniamtion: false}) 隱藏默認的tabbar

2. 點擊時使用 wx.switchTab 進行跳轉

優點：

1. 自定義更好看的tabbar

2. 相比其他用navigateTO實現的tabbar效果更好（沒有頁面跳轉）

3. 可以自定義頁面跳轉方式，比如第三個按鈕的目標頁面是一個二級頁面，不需要tabbar

缺點：

1. 相比於原生的tabbar，首次進入頁面的時候需要加載tabbar，導致初次切換到頁面的時候tabbar會閃爍一下，視覺效果差點

注：可以考慮在單頁面中引入多個頁面來避免閃爍的問題，但是這樣開發的復雜度會高不少

效果圖：

2019-1-21 更新

小程序有時ios下tabbar沒有隱藏，為了保險起見在組件的生命周期內調用了多次 wx.hideTabBar

2019/1/22 更新

發現在ios下，在小程序全屏播放視頻后回到頁面內時tabbar會再次出現，因此如果有全屏播放視頻的需求的話需要在視頻對象的 bindfullscreenchange 事件中再次調用 wx.hideTabBar({aniamtion: false})

（我不管，反正這是微信ios端的鍋，不是我的代碼有問題 ヽ(ｏ`皿′ｏ)ﾉ ）

2019/4/4 更新

看文檔時發現小程序官方在2.5.0出了一個自定義tabbar的功能，但是對版本庫有要求，在低版本基礎庫下會降級成原生的tabbar樣式（總覺得跟我自己寫的也差不多，不過官方支持就更好了。。。）