版权声明:https://blog.csdn.net/qq_37949737?assign_skin=skin-ink https://blog.csdn.net/qq_37949737/article/details/90043355
1.需要用到两个API分别是wx.showTabBarRedDot()和wx.hideTabBarRedDot
wx.showTabBarRedDot() 显示 tabBar 某一项的右上角的红点
wx.hideTabBarRedDot 隐藏 tabBar 某一项的右上角的红点
index tabBar 的哪一项,从左边算起
2.需要用到定时器setInterval()
思路:我们用定时器控制红点的显示和隐藏就可以了!
具体如下:
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: 3,//index是让tabbar的第几个图标闪起来(从0开始的),我现在是让第二个图片的红点闪
})
} else {
wx.hideTabBarRedDot({
index: 3,//index是让tabbar的第几个图标闪起来(从0开始的),我现在是让第二个图片的红点闪
})
}
if (countDownNum == 0) {
clearInterval(that.data.timer);//让计时器取消定时
}
}, 1000)//这里的单位是毫秒,是计时器在倒数时的间隔时间,如果想把闪烁速度调快,把这里的数值调低
})
}
},
onLoad: function(options) {
this.countDown();//然后再调用定时器方法就可以执行了
},
至此,tabbar红点效果已加完!