微信小程序tabbar图标右上角红点闪烁

微信小程序tabbar图标右上角红点闪烁

开发的时候总会遇到一些神经老总，他们总会有一些神经要求。（吐槽一下）
惯例，直接开撸
一、准备工作
了解用什么来使tabbar右上角有红点，如何让它闪起来
微信给了我们很好的方法，我们只需要调用就可以了
1.tabbar出现红点
wx.showTabBarRedDot
2.隐藏tabbar红点（tabbar的红点默认隐藏）
wx.hideTabBarRedDot
3.计时器
setInterval
有了这3个方法我们就有思路了，用计时器判定tabbar什么时候出现红点什么时候隐藏红点，不需要用循环来做

二、上代码

data:{
	countDownNum :"100"
	i:"123"
}
//计时器，用于闪烁的红点
  countDown: function() {
    var that = this,
      countDownNum = that.data.countDownNum
    
    if (that.data.i != null) {
      that.setData({
        timer: setInterval(function () {
          countDownNum --;
          console.log(countDownNum)
          //我这里用的是求余方法
          //当countDownNum为偶数时显示红点
          //当countDownNum为奇数时隐藏红点
          if (countDownNum%2==0){
            wx.showTabBarRedDot({
              index: 1,//index是让tabbar的第几个图标闪起来(从0开始的)，我现在是让第二个图片的红点闪
            })
          }else{
            wx.hideTabBarRedDot({
              index: 1,//index是让tabbar的第几个图标闪起来(从0开始的)，我现在是让第二个图片的红点闪
            })
          }
          if (countDownNum == 0) {
            clearInterval(that.data.timer);//让计时器取消定时
          }
        }, 1000)//这里的单位是毫秒，是计时器在倒数时的间隔时间,如果想把闪烁速度调快，把这里的数值调低
      })
    }
  },

三、附上接口的网址
计时器的网址:https://developers.weixin.qq.com/miniprogram/dev/api/setInterval.html?search-key=setinterval
显示或隐藏tabbar红点的网址:https://developers.weixin.qq.com/miniprogram/dev/api/ui-tabbar.html#wxremovetabbarbadgeobject

如果大佬们有更好的方法欢迎评论区留言，谢谢！