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

最新推荐文章于 2024-04-29 23:16:51 发布

原创最新推荐文章于 2024-04-29 23:16:51 发布 · 1.6w 阅读

26 ·

CC 4.0 BY-SA版权

小程序专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一种在微信小程序中实现未读消息通知的方法，通过API获取未读消息数量并根据数量设置不同的角标显示方式，如具体数字、省略号或移除角标。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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
          })
        }
        
      }
    })
  }