• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

前言

在一般的商城类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() 生命周期函数中进行设定。这样才能达到实时正确显示角标数据。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
小程序获取云数据库集合的数据并显示在页面发布时间:2022-07-18
下一篇:
搭建Spring开发环境并编写第一个Spring小程序发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap