欢迎您访问 最编程 本站为您分享编程语言代码,编程技术文章!
您现在的位置是: 首页

微信小程序的实现 底部导航栏未读消息出现小红点

最编程 2024-05-03 15:10:22
...

微信小程序未读消息出现小红点的实现

用的是showTabBarRedDot,可以在微信接口文档中查看具体使用方法
其实使用方法很简单,只要有个状态可以判断红点的显示与否就好了,我这里的显示标识是后端传过来的

    //未读 这里是接口请求可自行删减
    wx.request({
      url: wx.getStorageSync("baseUrl") + '/wxapi/listApplyPage',
      // url: 'http://localhost:8082/wxapi/listApplyPage',
      header: {
        "Content-Type": "application/x-www-form-urlencoded"
      },
      data: {
        'userId': wx.getStorageSync("wxuser").userId,
        // 'orderTime': '',
        'type': '0',
        'auditStatus': '3',
        'pageSize': '100',
        'pageNo': '1'
      },
      method: 'POST',
      success: (res) => {
        console.log(JSON.stringify(res.data));
        if(res.data.count!=0){
        // 根据count的状态判断红点显示与否
          wx.showTabBarRedDot({
          // index 是导航栏的索引 就是在第几个导航上显示
            index: 1,
          })
        }
      }
    })