每次看到某电商平台的拼团提示会觉得很有趣也很方便,正好自己在学习小程序,那就想个法子实现一下这种效果咯~
思虑了一下还是觉得用setIntercal方法比较简便(数据方面就先不考虑了,我这里只做一下表现效果),基本思路是通过定时来控制拼团提示出现和隐藏;即隔一定时间就将data中传给wx:if里的数据取反(布尔值);写完后我认真的去比对了一下,为什么同样都是闪烁,我的怎么越看越别扭??....
上图上图[紧张脸]
代码:
wxml
<view class="invite_container" wx:if="{{show}}">
<navigator class="invitation" animation="{{animationData}}" url="../invitation/invitation">
<view class="invite invite_pic">
<image src="../../images/touxiang.png"></image>
</view>
<view class="invite invite_content">Lesta邀请您一起剁手</view>
</navigator>
</view>
复制代码
js
//data中,默认拼团提示显示
data: {
show: true,
}
.......
//在onLoad函数里调用setInterval方法
onLoad: function() {
var that = this;
//动画
var animation = wx.createAnimation();
//计时,每1.5秒弹出一次
setInterval(function () {
//取反控制显示和隐藏
var show = !that.data.show;
that.setData({
animationData: animation.export(),
show: show
})
}, 1500)
}
复制代码
大概就是这样吧,很简单的一个小方法,对setInterval有疑问的小伙伴可以去看看参考手册噢。
附:我的github地址
我的小项目地址
谢谢各位小伙伴~