微信小程序給底部tabBar圖標添加角標

前言

在一般的商城類app或者小程序，一般購物車菜單都會有右上角角標。今天我這里在微信小程序上進行實現。

思路

查看微信小程序官方文檔：

實現

 let cartNum = ; //通過后台接口獲取 if (cartNum.length != 0) { //設置角標 wx.setTabBarBadge({ index: 2, //tabBar序號，從0開始計數 text: cartNum.toString() }) } else { //移除角標 wx.removeTabBarBadge({ index: 2, }) } 

問題 ：setTabBarBadge:fail not TabBar page？

我們在非tabbar的頁面上使用這部分代碼，會報錯，這是官方設計上的缺陷(個人認為)。
但是我們一把會在其他頁面添加商品到購物車中，這樣就會導致重新進入購物車頁面，角標不能正確實時展示。
我這邊解決這個問題的思路就是，在每個tabbar頁面的onshow() 生命周期函數中進行設定。這樣才能達到實時正確顯示角標數據。