用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>
复制代码

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

       个人小项目地址



谢谢各位小伙伴~