微信小程序底部导航简单实现右上角小红点不停闪烁效果
小程序
2019-04-06 11:37:03
微信小程序底部导航小红点不停闪烁功能是很常见的一个效果,那么关于该功能我们在代码是如何实现的呢?
效果预览:
原理解析:微信小程序官方问题提供了小圆点的显示隐藏参数设置,这样我们就可以通过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进行对应处理来执行下一步操作!
六月初字帖坊小程序
你想要的字帖模板及工具,这里都有!
877篇文章
2216人已阅读