需求
在tabbar的圖標(biāo)右側(cè)顯示和隱藏小圓點(diǎn)。一般表示有新消息、新更新。
基本代碼
序號(hào)從0開(kāi)始計(jì)算引润。
uni.showTabBarRedDot({index:1});
uni.hideTabBarRedDot({index:1});
修改代碼
App.vue或index頁(yè)
在App.vue的onLaunch周期或者是index頁(yè)的onLoad加入代碼，判定是否需要顯示紅點(diǎn)痒玩。
如果index頁(yè)跟消息完全無(wú)關(guān)淳附，那么盡量寫(xiě)在App.vue而不要寫(xiě)在index頁(yè)。為啥蠢古？因?yàn)?code>uni.showTabBarRedDot({index:1});跟具體頁(yè)面的data和業(yè)務(wù)邏輯無(wú)關(guān)奴曙，跟index頁(yè)也沒(méi)有必然關(guān)系，而且消息頁(yè)往往是第2個(gè)或第3個(gè)tabbar頁(yè)草讶，并不是index頁(yè)洽糟。如果index頁(yè)右上角也要加個(gè)新消息紅點(diǎn)，那么當(dāng)然要加在index頁(yè)堕战。
現(xiàn)在坤溃，在onLaunch（或index頁(yè)的onLoad）加代碼有2種做法，我們假設(shè)除了請(qǐng)求新消息嘱丢，還有一些其他的請(qǐng)求有必要放到onLaunch（或index頁(yè)的onLoad）里薪介，這里一并討論。
第一種做法越驻，先判斷會(huì)員是否登錄（下面兩項(xiàng)并發(fā)執(zhí)行）：
- Promise.all(若干個(gè)影響UI布局的訪客請(qǐng)求) -> Promise.all(若干個(gè)不影響UI布局的訪客請(qǐng)求)
- isLogin() -> yes -> Promise.all(若干個(gè)影響UI布局的會(huì)員請(qǐng)求) -> Promise.all(若干個(gè)不影響UI布局的會(huì)員請(qǐng)求) -> 新消息請(qǐng)求的回調(diào)：確定顯示或不顯示紅點(diǎn)
第二種汁政，不判斷是否登錄（下面兩項(xiàng)并發(fā)執(zhí)行）：
- Promise.all(若干個(gè)影響UI布局的訪客請(qǐng)求) -> Promise.all(若干個(gè)不影響UI布局的訪客請(qǐng)求)
- Promise.all(若干個(gè)影響UI布局的會(huì)員請(qǐng)求) -> Promise.all(若干個(gè)不影響UI布局的會(huì)員請(qǐng)求) -> 新消息請(qǐng)求的回調(diào)：確定顯示或不顯示紅點(diǎn)
如果不判斷是否登錄，則可能登錄過(guò)期缀旁，這就導(dǎo)致记劈，首先，浪費(fèi)了線程和流量去請(qǐng)求數(shù)據(jù)并巍，其次目木，如果axios攔截器設(shè)定攔截401錯(cuò)誤并跳轉(zhuǎn)到登錄頁(yè)，那么懊渡，上述的若干個(gè)影響UI布局的會(huì)員請(qǐng)求就必須加入攔截器里的白名單嘶窄，也就是說(shuō)，必須保證它們即使401也不跳轉(zhuǎn)到登錄頁(yè)距贷。
你的項(xiàng)目具體用哪種做法，都行吻谋。
處理登入忠蝗、登出代碼的success回調(diào)
登入代碼的success回調(diào)里需同樣請(qǐng)求一遍新消息數(shù)量，這回一定能請(qǐng)求到漓拾，不會(huì)fail阁最，不多說(shuō)戒祠。
登出代碼的success里直接無(wú)腦隱藏紅點(diǎn)。
可能改變紅點(diǎn)的頁(yè)面
在任何可能改變紅點(diǎn)的代碼的末尾都要加上判定速种，確定是否顯示紅點(diǎn)姜盈。
