小程式自定義tabbar
阿新 • • 發佈:2018-11-11
程式碼片段: wechatide://minicode/IUoCyemJ7D3d
GitHub: https://github.com/WozHuang/Miniprogram-Demo/tree/master/custom-tabbar
在專案中要求用tabbar,奈何老闆嫌微信自帶的tabbar太醜而且功能也不夠豐富,因此需要自定義tabbar,沒辦法就只能自己重新造一個,在造輪子之前從網上找了不少但都是直接使用navigateTo或者redirectTo實現跳轉功能,每次都重新載入一下頁面實在是受不了。
在細讀了微信的api文件後發現能夠使用hideTabBar這個方法將原有的tabbar隱藏掉,這樣只要自己重新寫一個tabbar就可以了
優點:
自定義更好看的tabbar
相比其他用navigateTO實現的tabbar效果更好(沒有頁面跳轉)
可以自定義頁面跳轉方式,比如第三個按鈕的目標頁面是一個二級頁面,不需要tabbar
缺點:
- 相比於原生的tabbar,首次進入頁面的時候需要載入tabbar,導致初次切換到頁面的時候tabbar會閃爍一下,視覺效果差點
注:可以考慮在單頁面中引入多個頁面來避免閃爍的問題,但是這樣開發的複雜度會高不少
效果圖:
實現原理
利用
wx.hideTabBar({aniamtion: false})
隱藏預設的tabbar點選時使用
wx.switchTab