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


       個人小項目地址




謝謝各位小夥伴~