目录

微信小程序-小标提示未读信息红色角标的展示

JAY.LIN 收录于小程序

2024-09-05 约 180 字预计阅读 1 分钟

https://bing.ee123.net/img/rand?artid=82833010

目录

微信小程序–小标提示未读信息红色角标的展示

主要的原理，也是通过对微信小程序自带的方法进行一次二次的封装

三种情况：

0<当前未读消息<99，那么显示为多少多少+，
当前未读消息>99：显示为省略号
当前未读消息== 0 ，取消角标的设置

  getUserNotReadNum(){
    this.xAjax({
      url: api.getUserNotReadNumUrl,
      callBack(res){
        if (99 >= res.data.notReadNum && res.data.notReadNum!=0){
          wx.setTabBarBadge({
            index: 1,
            text: res.data.notReadNum+''
          })
        } else if (99<res.data.notReadNum){
          wx.setTabBarBadge({
            index: 1,
            text: '···'
          })
        } else if(res.data.notReadNum == 0) {
          wx.removeTabBarBadge({
            index: 1
          })
        }
        
      }
    })
  }