用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)

    }