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

首頁 > 熱點 > 微信 > 正文

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

2024-07-22 01:18:39
字體:
來源:轉載
供稿:網友

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

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

如果實現簡單的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)  }) }})

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

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

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 博乐市| 体育| 普兰店市| 宜阳县| 贵南县| 客服| 邯郸市| 师宗县| 应城市| 宽城| 建平县| 兴城市| 平潭县| 云浮市| 华蓥市| 雷州市| 治县。| 怀远县| 孝义市| 墨玉县| 咸宁市| 蛟河市| 祁阳县| 大连市| 沙坪坝区| 天水市| 武隆县| 阿克苏市| 黎平县| 宁蒗| 舒兰市| 淄博市| 德安县| 博兴县| 连州市| 昆山市| 合水县| 罗源县| 安陆市| 双江| 阜宁县|