需求

在tabbar的圖標右側顯示和隱藏小圓點。一般表示有新消息、新更新。

基本代碼

序號從0開始計算。

uni.showTabBarRedDot({index:1});

uni.hideTabBarRedDot({index:1});

修改代碼

App.vue或index頁

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

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

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

第一種做法，先判斷會員是否登錄(下面兩項并發執行)：

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

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

第二種，不判斷是否登錄(下面兩項并發執行)：

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

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

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

你的項目具體用哪種做法，都行。

處理登入、登出代碼的success回調

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

登出代碼的success里直接無腦隱藏紅點。

可能改變紅點的頁面

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。