Happy New Year!

微信小程序给底部tabBar图标添加角标

前言

在一般的商城类app或者小程序,一般购物车菜单都会有右上角角标。今天我这里在微信小程序上进行实现。

思路

查看微信小程序官方文档:
在这里插入图片描述
在这里插入图片描述

实现

 let cartNum = ;  //通过后台接口获取
 if (cartNum.length != 0) {
   //设置角标
   wx.setTabBarBadge({
     index: 2,  //tabBar序号,从0开始计数
     text: cartNum.toString()
   })
 } else {
   //移除角标
   wx.removeTabBarBadge({
     index: 2,
   })
 }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

问题 :setTabBarBadge:fail not TabBar page?

我们在非tabbar的页面上使用这部分代码,会报错,这是官方设计上的缺陷(个人认为)。
但是我们一把会在其他页面添加商品到购物车中,这样就会导致重新进入购物车页面,角标不能正确实时展示。
我这边解决这个问题的思路就是,在每个tabbar页面的onshow() 生命周期函数中进行设定。这样才能达到实时正确显示角标数据。

posted @ 2020-12-24 17:05  义美-小义  阅读(3029)  评论(0编辑  收藏  举报
返回顶部小火箭
世界很公平,想要最好,就一定得付出!
x
github主页