收藏
回答

非TabBar页面怎么更新TabBar上面的小红点或者数字信息

问题模块 框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
API和组件 小程序 Bug setTabBarBadge 客户端 6.5.3 2.0.9

- 当前 Bug 的表现(可附上截图)


- 预期表现


- 复现路径


- 提供一个最简复现 Demo


在非TabBar页面执行

setTabBarBadge方法不起作用,如何在子页面更新一级页面上的Badge信息?


最后一次编辑于  2018-09-11  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏投诉关注问题回答

4 个回答

  • wilson
    wilson
    2018-09-11

    我是把 TabBarBadge 的状态存在全局上,每次进入 TabBar 页面时,用 onShow 检测更新

    2018-09-11
    赞同
    回复 1
    • 解析
      解析
      2018-09-11

      那样每个TabBar 页面都要写代码,很不好

      我直接用setInterval



      var clearTimer = function () {
          clearInterval(app.globalData.setTabBarBadgeTimer);
          app.globalData.setTabBarBadgeTimer = null;
      };
       
      if (app.globalData.setTabBarBadgeTimer){
          clearTimer();
        }else{
          app.globalData.setTabBarBadgeTimer=setInterval(function(){
            if (app.globalData.unreadCount > 0){
              wx.setTabBarBadge({
                index: 2,
                text: app.globalData.unreadCount.toString(),
                success: function () { clearTimer(); }
              });
            }else{
              wx.removeTabBarBadge({
                index: 2,
                success: function () { clearTimer(); }
              });
            }
          },300);
        }


      写在一个commonJs中,用的时候调用一下,300毫秒循环去,直到success退出

      2018-09-11
      赞同
      回复
  • 解析
    解析
    2018-09-11

    这个就是耗点页面性能,用户手机费点电,但应该不会影响很大吧

    2018-09-11
    赞同
    回复
  • .
    .
    2018-09-23

    结合上面兄弟的分享,我写了目前在用的方法:


    app.js


    _showBadge: function(num, show) {
        if (show == 0) {
            wx.removeTabBarBadge({ index: 3 });
        } else {
            wx.setTabBarBadge({
                index: 3,
                text: String(num),
            });
        }
    },
     
    // 微章闪动
    _flashingBadge: function(num) {
        var that = this;
        // 隐藏微章 显示微章 * 3
        that._showBadge(num, 0);
        setTimeout(function() {
            that._showBadge(num, 1);
        }, 150);
        setTimeout(function() {
            that._showBadge(num, 0);
        }, 300);
        setTimeout(function() {
            that._showBadge(num, 1);
        }, 400);
        setTimeout(function() {
            that._showBadge(num, 0);
        }, 480);
        setTimeout(function() {
            that._showBadge(num, 1);
        }, 580);
    },
     
    _clearBadgeTimer: function() {
        var that = this;
        if (that.globalData._setTabBarBadgeTimer) {
            clearInterval(that.globalData._setTabBarBadgeTimer);
            that.globalData._setTabBarBadgeTimer = null;
        }
    },
     
    _createBadgeTimer: function() {
        var that = this;
        if (that.globalData._setTabBarBadgeTimer) {
            return;
        } else {
            that.globalData._setTabBarBadgeTimer = setInterval(function() {
                that.setMsgBadge(that.globalData.badgeNum);
            }, 300);
        }
    },
     
    // 设置消息微章
    setMsgBadge: function(num) {
        var that = this;
        if (num == 0) {
            that.globalData.badgeNum = 0;
            wx.setStorageSync('badgeNum', 0);
            wx.removeTabBarBadge({
                index: 3,
                success: function() {
                    that._clearBadgeTimer();
                },
                fail: function() {
                    // 不在tab 页设置会失败 失败就启动定时器 来不断重试,直至成功,这样再回到tab页就不会出现 “Badge未同步” 的问题了
                    console.log('wx.removeTabBarBadge fail');
                    that._createBadgeTimer();
                },
            });
            return;
        }
     
        if (num > that.globalData.badgeNum) {
            wx.vibrateLong(); // 小震动
            wx.playBackgroundAudio({
                dataUrl: 'https://x.aipin100.cn/static/newMessage.aac',
            });
            that._flashingBadge(num); // 闪动
        }
     
        that.globalData.badgeNum = num;
        wx.setStorageSync('badgeNum', num);
     
        wx.setTabBarBadge({
            index: 3,
            text: String(num),
            success: function() {
                that._clearBadgeTimer();
            },
            fail: function() {
                // 不在tab 页设置会失败 失败就启动定时器 来不断重试,直至成功,这样再回到tab页就不会出现 “Badge未同步” 的问题了
                console.log('wx.setTabBarBadge fail');
                that._createBadgeTimer();
            },
        });
    },
    2018-09-23
    赞同
    回复