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

Michael_Lin 發(fā)布于2019-08-02 10:42 / 539人閱讀

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

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

上圖上圖[緊張臉]

代碼：

wxml

    
        
            
                
            
            Lesta邀請(qǐng)您一起剁手

    //data中，默認(rèn)拼團(tuán)提示顯示
    data: {
        show: true,
    }
    
    .......
    //在onLoad函數(shù)里調(diào)用setInterval方法
    onLoad: function() {
        var that = this;
        //動(dòng)畫
        var animation = wx.createAnimation();
        //計(jì)時(shí)，每1.5秒彈出一次
        setInterval(function () {
            //取反控制顯示和隱藏
            var show = !that.data.show;
            that.setData({
                animationData: animation.export(),
                show: show
            })
        }, 1500)
    }

大概就是這樣吧，很簡(jiǎn)單的一個(gè)小方法，對(duì)setInterval有疑問的小伙伴可以去看看參考手冊(cè)噢。

附：我的github地址

???????我的小項(xiàng)目地址

謝謝各位小伙伴~

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/52528.html

相關(guān)文章

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

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

sumory 2019-08-22 17:59 評(píng)論0 收藏0
JS實(shí)現(xiàn)瀏覽器的title閃爍、滾動(dòng)、聲音提示、通知

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

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

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

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

摘要：導(dǎo)航欄導(dǎo)航欄用的組件，設(shè)置其水平方向滑動(dòng)，點(diǎn)擊到的字體會(huì)變換樣式。而且，導(dǎo)航欄點(diǎn)擊不同的類別會(huì)將主頁替換成不同的結(jié)構(gòu)，這就要將最開始的主頁結(jié)構(gòu)隱藏起來。前言購(gòu)物節(jié)又要來啦?。。ㄈ龌ㄈ龌ǎ。┝闶炒蛘劾玻。∫路蛘哿耍。⌒』锇閭儨?zhǔn)備好買買買了嗎?。?！讓我看看我還多少余額哈?。M心期待(*￣︶￣)）（10秒后......）好吧我還是寫個(gè)電商小程序過過癮好了。[冷漠臉]咳咳，讓我們進(jìn)入正題...

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

摘要：導(dǎo)航欄導(dǎo)航欄用的組件，設(shè)置其水平方向滑動(dòng)，點(diǎn)擊到的字體會(huì)變換樣式。而且，導(dǎo)航欄點(diǎn)擊不同的類別會(huì)將主頁替換成不同的結(jié)構(gòu)，這就要將最開始的主頁結(jié)構(gòu)隱藏起來。前言購(gòu)物節(jié)又要來啦?。。ㄈ龌ㄈ龌ǎ。┝闶炒蛘劾玻。∫路蛘哿耍?！小伙伴們準(zhǔn)備好買買買了嗎?。。∽屛铱纯次疫€多少余額哈?。M心期待(*￣︶￣)）（10秒后......）好吧我還是寫個(gè)電商小程序過過癮好了。[冷漠臉]咳咳，讓我們進(jìn)入正題...

MarvinZhang 2019-08-02 10:41 評(píng)論0 收藏0