微信小程序底部导航简单实现右上角小红点不停闪烁效果

微信小程序底部导航小红点不停闪烁功能是很常见的一个效果,那么关于该功能我们在代码是如何实现的呢?

效果预览:


原理解析:微信小程序官方问题提供了小圆点的显示隐藏参数设置,这样我们就可以通过setinterval来实现时间段的显示隐藏,当然这里你也可以不用setinterval用别的实现方法。

app.js完整代码:为什么要放在app.js中而不是别的地方,大家可以查看我另外一篇博客《微信小程序底部导航右上角的红点基础使用、wx.showTabBarRedDot》里面有详细解释。

//app.js
App({
onLaunch: function () {
var show = true;
setInterval(function(){
if(show){
wx.showTabBarRedDot({
index: 3
})
show = false;
}else{
wx.hideTabBarRedDot({
index: 3
})
show = true;
}
},500)

},
globalData: {
}
})

代码解析:从代码中我们可以看到首先定义了一个参数show,然后setinterval每隔500毫秒执行,执行判断是否为true,进行显示隐藏。每次操作过后对show进行对应处理来执行下一步操作!

六月初字帖坊小程序 你想要的字帖模板及工具,这里都有!