微信小程序自定義tabbar,切換時(shí)圖標(biāo)閃現(xiàn)問(wèn)題

參考了微信小程序官網(wǎng)提供的例子創(chuàng)建自定義tabbar,但出現(xiàn)了切換時(shí)圖標(biāo)閃現(xiàn)的問(wèn)題。

先看官網(wǎng)例子:

custom-tab-bar --> index.js

custom-tab-bar --> index.js

其他tab頁(yè)面 --> 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)容。

如圖:


自定義tabbar生命周期函數(shù)


自定義tabbar


切換tab時(shí)屠尊,執(zhí)行生命周期函數(shù)并將內(nèi)容打印到控制臺(tá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)題者冤。

如圖:

嘗試代碼1

接著優(yōu)化,切換不同tab時(shí)档痪,刪除設(shè)置當(dāng)前tab狀態(tài)值的代碼涉枫。測(cè)試后發(fā)現(xiàn)模擬器、預(yù)覽和真機(jī)調(diào)試時(shí)都更好了一點(diǎn)腐螟。
如圖:

嘗試代碼2

大家有更好的方法或者有說(shuō)的不對(duì)的地方歡迎留言一起討論愿汰。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
禁止轉(zhuǎn)載,如需轉(zhuǎn)載請(qǐng)通過(guò)簡(jiǎn)信或評(píng)論聯(lián)系作者乐纸。
  • 序言:七十年代末衬廷,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子汽绢,更是在濱河造成了極大的恐慌吗跋,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,544評(píng)論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異跌宛,居然都是意外死亡酗宋,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,430評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門(mén)疆拘,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)蜕猫,“玉大人,你說(shuō)我怎么就攤上這事哎迄』赜遥” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 162,764評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵芬失,是天一觀的道長(zhǎng)楣黍。 經(jīng)常有香客問(wèn)我,道長(zhǎng)棱烂,這世上最難降的妖魔是什么租漂? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,193評(píng)論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮颊糜,結(jié)果婚禮上哩治,老公的妹妹穿的比我還像新娘。我一直安慰自己衬鱼,他們只是感情好业筏,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,216評(píng)論 6 388
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著鸟赫,像睡著了一般蒜胖。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上抛蚤,一...
    開(kāi)封第一講書(shū)人閱讀 51,182評(píng)論 1 299
  • 那天台谢,我揣著相機(jī)與錄音,去河邊找鬼岁经。 笑死朋沮,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的缀壤。 我是一名探鬼主播樊拓,決...
    沈念sama閱讀 40,063評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼塘慕!你這毒婦竟也來(lái)了筋夏?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 38,917評(píng)論 0 274
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤图呢,失蹤者是張志新(化名)和其女友劉穎叁丧,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,329評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡拥娄,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,543評(píng)論 2 332
  • 正文 我和宋清朗相戀三年蚊锹,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片稚瘾。...
    茶點(diǎn)故事閱讀 39,722評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡牡昆,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出摊欠,到底是詐尸還是另有隱情丢烘,我是刑警寧澤,帶...
    沈念sama閱讀 35,425評(píng)論 5 343
  • 正文 年R本政府宣布些椒,位于F島的核電站播瞳,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏免糕。R本人自食惡果不足惜赢乓,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,019評(píng)論 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望石窑。 院中可真熱鬧牌芋,春花似錦、人聲如沸松逊。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,671評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)经宏。三九已至犀暑,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間烁兰,已是汗流浹背母怜。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,825評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留缚柏,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,729評(píng)論 2 368
  • 正文 我出身青樓碟贾,卻偏偏與公主長(zhǎng)得像币喧,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子袱耽,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,614評(píng)論 2 353

推薦閱讀更多精彩內(nèi)容