【微信小程序】微信小程序怎么让tabbar右上角的红点动起来,闪烁红点。

版权声明: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红点效果已加完!

猜你喜欢

转载自blog.csdn.net/qq_37949737/article/details/90043355
今日推荐