用setInterval方法實現(xiàn)彈框閃爍

sumory 發(fā)布于2019-08-22 17:59 / 528人閱讀

每次看到某電商平臺的拼團(tuán)提示會覺得很有趣也很方便，正好自己在學(xué)習(xí)小程序，那就想個法子實現(xiàn)一下這種效果咯~

思慮了一下還是覺得用setIntercal方法比較簡便（數(shù)據(jù)方面就先不考慮了，我這里只做一下表現(xiàn)效果），基本思路是通過定時來控制拼團(tuán)提示出現(xiàn)和隱藏；即隔一定時間就將data中傳給wx:if里的數(shù)據(jù)取反（布爾值）；寫完后我認(rèn)真的去比對了一下，為什么同樣都是閃爍，我的怎么越看越別扭？？....

上圖上圖[緊張臉]

代碼：

wxml

    
        
            
                
            
            Lesta邀請您一起剁手

    //data中，默認(rèn)拼團(tuán)提示顯示
    data: {
        show: true,
    }
    
    .......
    //在onLoad函數(shù)里調(diào)用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地址

???????我的小項目地址

謝謝各位小伙伴~

云服務(wù)器 GPU云服務(wù)器 java實現(xiàn)點擊彈框 html實現(xiàn)彈框界面關(guān)于頁面彈框功能實現(xiàn) setInterval

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/95385.html

相關(guān)文章

用setInterval方法實現(xiàn)彈框閃爍

每次看到某電商平臺的拼團(tuán)提示會覺得很有趣也很方便，正好自己在學(xué)習(xí)小程序，那就想個法子實現(xiàn)一下這種效果咯~思慮了一下還是覺得用setIntercal方法比較簡便（數(shù)據(jù)方面就先不考慮了，我這里只做一下表現(xiàn)效果），基本思路是通過定時來控制拼團(tuán)提示出現(xiàn)和隱藏；即隔一定時間就將data中傳給wx:if里的數(shù)據(jù)取反（布爾值）；寫完后我認(rèn)真的去比對了一下，為什么同樣都是閃爍，我的怎么越看越別扭？？....上圖上...

Michael_Lin 2019-08-02 10:42 評論0 收藏0
JS實現(xiàn)瀏覽器的title閃爍、滾動、聲音提示、通知

摘要：通知實現(xiàn)瀏覽器的閃爍滾動聲音提示等系統(tǒng)通知。先這是重復(fù)造輪子，標(biāo)題閃爍或者滾動提示，數(shù)字顯示。聲音設(shè)置播放聲音自動播放聲音停止播放聲音設(shè)置播放聲音設(shè)置一個設(shè)置多個通知最新的版本默認(rèn)不播放標(biāo)題閃爍動畫，初始化之后需要調(diào)用方法才播放標(biāo)題動畫。通知 showImg(https://img.shields.io/github/issues/jaywcjlove/iNotify.svg); s...

SillyMonkey 2019-08-21 10:30 評論0 收藏0
618購物節(jié)來襲，電商陪你浪浪浪

摘要：導(dǎo)航欄導(dǎo)航欄用的組件，設(shè)置其水平方向滑動，點擊到的字體會變換樣式。而且，導(dǎo)航欄點擊不同的類別會將主頁替換成不同的結(jié)構(gòu)，這就要將最開始的主頁結(jié)構(gòu)隱藏起來。前言購物節(jié)又要來啦！！（撒花撒花！）零食打折啦！！衣服打折了！！小伙伴們準(zhǔn)備好買買買了嗎！！！讓我看看我還多少余額哈！（滿心期待(*￣︶￣)）（10秒后......）好吧我還是寫個電商小程序過過癮好了。[冷漠臉]咳咳，讓我們進(jìn)入正題...

selfimpr 2019-08-29 15:42 評論0 收藏0
618購物節(jié)來襲，電商陪你浪浪浪

摘要：導(dǎo)航欄導(dǎo)航欄用的組件，設(shè)置其水平方向滑動，點擊到的字體會變換樣式。而且，導(dǎo)航欄點擊不同的類別會將主頁替換成不同的結(jié)構(gòu)，這就要將最開始的主頁結(jié)構(gòu)隱藏起來。前言購物節(jié)又要來啦！！（撒花撒花！）零食打折啦！！衣服打折了！！小伙伴們準(zhǔn)備好買買買了嗎！！！讓我看看我還多少余額哈！（滿心期待(*￣︶￣)）（10秒后......）好吧我還是寫個電商小程序過過癮好了。[冷漠臉]咳咳，讓我們進(jìn)入正題...

hellowoody 2019-08-22 18:00 評論0 收藏0
618購物節(jié)來襲，電商陪你浪浪浪

摘要：導(dǎo)航欄導(dǎo)航欄用的組件，設(shè)置其水平方向滑動，點擊到的字體會變換樣式。而且，導(dǎo)航欄點擊不同的類別會將主頁替換成不同的結(jié)構(gòu)，這就要將最開始的主頁結(jié)構(gòu)隱藏起來。前言購物節(jié)又要來啦！！（撒花撒花！）零食打折啦！！衣服打折了！！小伙伴們準(zhǔn)備好買買買了嗎！！！讓我看看我還多少余額哈！（滿心期待(*￣︶￣)）（10秒后......）好吧我還是寫個電商小程序過過癮好了。[冷漠臉]咳咳，讓我們進(jìn)入正題...

MarvinZhang 2019-08-02 10:41 評論0 收藏0