需求

在tabbar的圖標(biāo)右側(cè)顯示和隱藏小圓點(diǎn)。一般表示有新消息、新更新。

基本代碼

序號從0開始計(jì)算。

uni.showTabBarRedDot({index:1});

uni.hideTabBarRedDot({index:1});

修改代碼

App.vue或index頁

在App.vue的onLaunch周期或者是index頁的onLoad加入代碼，判定是否需要顯示紅點(diǎn)。

如果index頁跟消息完全無關(guān)，那么盡量寫在App.vue而不要寫在index頁。為啥？因?yàn)閡ni.showTabBarRedDot({index:1});跟具體頁面的data和業(yè)務(wù)邏輯無關(guān)，跟index頁也沒有必然關(guān)系，而且消息頁往往是第2個(gè)或第3個(gè)tabbar頁，并不是index頁。如果index頁右上角也要加個(gè)新消息紅點(diǎn)，那么當(dāng)然要加在index頁。

現(xiàn)在，在onLaunch(或index頁的onLoad)加代碼有2種做法，我們假設(shè)除了請求新消息，還有一些其他的請求有必要放到onLaunch(或index頁的onLoad)里，這里一并討論。

第一種做法，先判斷會員是否登錄(下面兩項(xiàng)并發(fā)執(zhí)行)：

Promise.all(若干個(gè)影響UI布局的訪客請求) -> Promise.all(若干個(gè)不影響UI布局的訪客請求)

isLogin() -> yes -> Promise.all(若干個(gè)影響UI布局的會員請求) -> Promise.all(若干個(gè)不影響UI布局的會員請求) -> 新消息請求的回調(diào)：確定顯示或不顯示紅點(diǎn)

第二種，不判斷是否登錄(下面兩項(xiàng)并發(fā)執(zhí)行)：

Promise.all(若干個(gè)影響UI布局的訪客請求) -> Promise.all(若干個(gè)不影響UI布局的訪客請求)

Promise.all(若干個(gè)影響UI布局的會員請求) -> Promise.all(若干個(gè)不影響UI布局的會員請求) -> 新消息請求的回調(diào)：確定顯示或不顯示紅點(diǎn)

如果不判斷是否登錄，則可能登錄過期，這就導(dǎo)致，首先，浪費(fèi)了線程和流量去請求數(shù)據(jù)，其次，如果axios攔截器設(shè)定攔截401錯誤并跳轉(zhuǎn)到登錄頁，那么，上述的若干個(gè)影響UI布局的會員請求就必須加入攔截器里的白名單，也就是說，必須保證它們即使401也不跳轉(zhuǎn)到登錄頁。

你的項(xiàng)目具體用哪種做法，都行。

處理登入、登出代碼的success回調(diào)

登入代碼的success回調(diào)里需同樣請求一遍新消息數(shù)量，這回一定能請求到，不會fail，不多說。

登出代碼的success里直接無腦隱藏紅點(diǎn)。

可能改變紅點(diǎn)的頁面

在任何可能改變紅點(diǎn)的代碼的末尾都要加上判定，確定是否顯示紅點(diǎn)。

總結(jié)

以上是生活随笔為你收集整理的tab栏圆点按钮_uniapp tabbar上的小圆点的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。