国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 課堂 > 小程序 > 正文

詳解微信小程序用定時器實現倒計時效果

2020-03-21 15:58:31
字體:
來源:轉載
供稿:網友

平常在微信小程序開發的時候,因項目的需求,倒計時必不可少,下面主要講解定時器在微信小程序中的使用。

這里要先聲明一點的就是,該篇主要實現倒計時功能,而且實現是時長較短的倒計時,其他的優化什么的不作主要考慮。

如果實現簡單的60s倒計時效果,我們可直接使用setInterval即可,但是在微信小程序中,我們需要用微信小程序的語法,這時就會遇到一個難題,那就是怎么關閉定時器的問題,下面給出實例。

WXML代碼

<view class='countDown'>倒計時:<text style='color:red'>{{countDownNum}}</text>s</view>

JS代碼:

Page({ /**  * 頁面的初始數據  */ data: {  timer: '',//定時器名字  countDownNum: '60'//倒計時初始值 },  onShow: function(){  //什么時候觸發倒計時,就在什么地方調用這個函數  this.countDown(); },  countDown: function () {  let that = this;  let countDownNum = that.data.countDownNum;//獲取倒計時初始值  //如果將定時器設置在外面,那么用戶就看不到countDownNum的數值動態變化,所以要把定時器存進data里面  that.setData({   timer: setInterval(function () {//這里把setInterval賦值給變量名為timer的變量    //每隔一秒countDownNum就減一,實現同步    countDownNum--;    //然后把countDownNum存進data,好讓用戶知道時間在倒計著    that.setData({     countDownNum: countDownNum    })    //在倒計時還未到0時,這中間可以做其他的事情,按項目需求來    if (countDownNum == 0) {     //這里特別要注意,計時器是始終一直在走的,如果你的時間為0,那么就要關掉定時器!不然相當耗性能     //因為timer是存在data里面的,所以在關掉時,也要在data里取出后再關閉     clearInterval(that.data.timer);     //關閉定時器之后,可作其他處理codes go here    }   }, 1000)  }) }})

好了,這就是簡單的倒計時實現過程,大家可復制代碼到微信開發者工具去驗證效果。

以上所述是小編給大家介紹的微信小程序用定時器實現倒計時效果詳解整合,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對VEVB武林網網站的支持!


發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 封丘县| 松滋市| 苍南县| 马山县| 东兰县| 紫阳县| 错那县| 西青区| 武清区| 子洲县| 志丹县| 桃园县| 东乡族自治县| 博乐市| 贡觉县| 抚州市| 汪清县| 车险| 德化县| 台中市| 聂荣县| 甘德县| 溧水县| 通城县| 西吉县| 苏尼特右旗| 普兰县| 丁青县| 信宜市| 西充县| 舟曲县| 乌什县| 宁蒗| 宜都市| 渭南市| 阿城市| 吉水县| 冕宁县| 加查县| 宣城市| 太和县|