開發(fā)小程序時拟糕，經(jīng)常遇到的模板就是下方tabBar分不同模塊進行頁面展示注祖，但官方支付寶小程序底部tabBar提供樣式過于簡單谓厘，還不能進行樣式覆蓋與編輯念恍，如果簡單的設(shè)計可以直接用官方配置（此處省略）六剥，若復(fù)雜一點的，就需要自己自定義了峰伙，通過摸索開發(fā)后總結(jié)以下方式進行自定義底部tabBar疗疟。
首先自定義tabBar后會遇到一個大家廣泛遇到的問題，就是點擊底部tab按鈕后瞳氓，頁面跟著閃爍出現(xiàn)策彤，這個問題出現(xiàn)的原因其實是因為我們把tabbar放在了每個頁面里進行加載，所以每次點擊相當(dāng)于跳轉(zhuǎn)到新頁面匣摘，自然tabbar顯示的方式肯定是閃爍的店诗；
正確的搭建方式是：
將每個tab顯示的內(nèi)容封裝成一個小程序組件，然后再定義一個小程序頁面音榜，將本頁面路徑設(shè)置為第一個（目的是小程序進入后首頁加載）庞瘸，然后在本頁面中自定義tabbar，并將剛封裝好的組件引入到此頁面赠叼，這樣點擊每個tab按鈕就不會出現(xiàn)頁面閃爍的問題啦擦囊；以下貼代碼與效果圖
項目目錄
Dingtalk_20200922174838.jpg
主文件
image.png
組件引用
image.png
效果圖
image.png
如果遇到組件內(nèi)跳轉(zhuǎn)其他組件的問題，可用到子組件調(diào)用父組件方法來做嘴办，代碼如下
子組件
image.png
image.png
父組件
image.png
對應(yīng)調(diào)用點擊tab按鈕變更組件的事件即可
image.png
