用setInterval方法实现弹框闪烁

每次看到某电商平台的拼团提示会觉得很有趣也很方便，正好自己在学习小程序，那就想个法子实现一下这种效果咯~

思虑了一下还是觉得用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>

    //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地址

我的小项目地址

谢谢各位小伙伴~

猜你喜欢