小程序Tab Bar的红点或红色数字标记使用
发布于 2 年前 作者 nkang 3065 次浏览 来自 分享

微信小程序底部Tab Bar栏可自由地设置自己需显示的Tab菜单,相信大家使用起来都非常熟悉了。在通常情况下,每个Tab菜单都有一定的业务场景与之对应。比如,商城订单菜单,对于用户来说需要有订单提醒,包括待签收的订单,可用红点提醒,也可用红色红字提醒,因为用户下的订单不回太多,数字显示就不重要,重要的是有订单要签收提醒就够了。而,对于商城运营来说,需要有待发货的订单提醒,TA更新关心待发货订单数量,这时建议使用红色数字提醒更好。

此外,当提醒之后,用户或运营进入订单列表之后,要去除这个红点或红色数字提醒,即增加与移除是一对操作,并需成对出现。

好了,下面给出这两对API的使用方法,如下:

一、wx.showTabBarRedDot和wx.hideTabBarRedDot

wx.showTabBarRedDot({
  index: 0,
});

wx.hideTabBarRedDot({
  index: 0,
});

其中,index参数是指Tab Bar栏的Tab菜单编号,从左边开始,依次是0、1、2等。

 

二、wx.setTabBarBadge和wx.removeTabBarBadge

wx.setTabBarBadge({
  index: 0,
  text: '1'
});

wx.removeTabBarBadge({
  index: 0,
});

其中,index参数是指Tab Bar栏的Tab菜单编号,从左边开始,依次是0、1、2等;text参数设置的是要提醒的数字,比如上面讲到的待发货的订单数量。

 

回到顶部