參考了微信小程序官網(wǎng)提供的例子創(chuàng)建自定義tabbar,但出現(xiàn)了切換時(shí)圖標(biāo)閃現(xiàn)的問(wèn)題。
先看官網(wǎng)例子:
custom-tab-bar --> index.js
其他tab頁(yè)面 --> index.js
根據(jù)官網(wǎng)提供的例子發(fā)現(xiàn):自定義custom-tab-bar(注:為了方便后文直接使用tabbar表示)中記錄當(dāng)前tab選中狀態(tài)的值套菜,在點(diǎn)擊其他tab時(shí)設(shè)置過(guò)一次值,在使用tabbar的頁(yè)面中也設(shè)置了當(dāng)前tab選中狀態(tài)的值设易。為什么要重復(fù)設(shè)置兩次當(dāng)前頁(yè)面選中狀態(tài)的值逗柴?
通過(guò)在自定義組件生命周期函數(shù)created,attacted中輸出內(nèi)容到控制臺(tái)顿肺,點(diǎn)擊tabbar中的tab戏溺,查看控制臺(tái)輸出內(nèi)容。
如圖:
從控制臺(tái)中輸出的內(nèi)容可以看出:使用switchTab跳轉(zhuǎn)頁(yè)面后旷祸,tabbar自定義組件重新被創(chuàng)建、渲染讼昆。
因此在使用tabbar的頁(yè)面中設(shè)置當(dāng)前tab選中狀態(tài)的值是必要的托享,讓自定義組件頁(yè)面在跳轉(zhuǎn)后可以選中當(dāng)前頁(yè)面對(duì)應(yīng)的tab。而自定義組件tabbar中切換tab時(shí)也設(shè)置了當(dāng)前tab選中狀態(tài)的值且默認(rèn)值為0浸赫。因此使用switchTab跳轉(zhuǎn)頁(yè)面后闰围,tabbar自定義組件重新被創(chuàng)建、渲染先默認(rèn)選中第一個(gè)tab然后再選中當(dāng)前頁(yè)面所對(duì)應(yīng)的tab既峡。
實(shí)施:
把自定義tabbar中用于記錄當(dāng)前頁(yè)面選中狀態(tài)的初始值改為null辫诅,切換不同tab時(shí),當(dāng)前tab狀態(tài)值也改為null涧狮。測(cè)試后發(fā)現(xiàn)模擬器有效但預(yù)覽和真機(jī)調(diào)試時(shí)圖標(biāo)不會(huì)從第一個(gè)tab先選中,然后再選中當(dāng)前tab了么夫,但會(huì)出現(xiàn)當(dāng)前tab圖標(biāo)閃現(xiàn)的問(wèn)題者冤。
如圖:
接著優(yōu)化,切換不同tab時(shí)档痪,刪除設(shè)置當(dāng)前tab狀態(tài)值的代碼涉枫。測(cè)試后發(fā)現(xiàn)模擬器、預(yù)覽和真機(jī)調(diào)試時(shí)都更好了一點(diǎn)腐螟。
如圖:
大家有更好的方法或者有說(shuō)的不對(duì)的地方歡迎留言一起討論愿汰。