平常在微信小程序開發(fā)的時(shí)候，因項(xiàng)目的需求，倒計(jì)時(shí)必不可少，下面主要講解定時(shí)器在微信小程序中的使用。
這里要先聲明一點(diǎn)的就是，該篇主要實(shí)現(xiàn)倒計(jì)時(shí)功能，而且實(shí)現(xiàn)是時(shí)長(zhǎng)較短的倒計(jì)時(shí)，其他的優(yōu)化什么的不作主要考慮。
如果實(shí)現(xiàn)簡(jiǎn)單的60s倒計(jì)時(shí)效果，我們可直接使用setInterval即可，但是在微信小程序中，我們需要用微信小程序的語法，這時(shí)就會(huì)遇到一個(gè)難題，那就是怎么關(guān)閉定時(shí)器的問題，下面給出實(shí)例。
WXML代碼
<view class='countDown'>倒計(jì)時(shí)：<text style='color:red'>{{countDownNum}}</text>s</view>JS代碼：
Page({ /** * 頁面的初始數(shù)據(jù) */ data: { timer: '',//定時(shí)器名字 countDownNum: '60'//倒計(jì)時(shí)初始值 }, onShow: function(){ //什么時(shí)候觸發(fā)倒計(jì)時(shí)，就在什么地方調(diào)用這個(gè)函數(shù) this.countDown(); }, countDown: function () { let that = this; let countDownNum = that.data.countDownNum;//獲取倒計(jì)時(shí)初始值 //如果將定時(shí)器設(shè)置在外面，那么用戶就看不到countDownNum的數(shù)值動(dòng)態(tài)變化，所以要把定時(shí)器存進(jìn)data里面 that.setData({ timer: setInterval(function () {//這里把setInterval賦值給變量名為timer的變量 //每隔一秒countDownNum就減一，實(shí)現(xiàn)同步 countDownNum--; //然后把countDownNum存進(jìn)data，好讓用戶知道時(shí)間在倒計(jì)著 that.setData({ countDownNum: countDownNum }) //在倒計(jì)時(shí)還未到0時(shí)，這中間可以做其他的事情，按項(xiàng)目需求來 if (countDownNum == 0) { //這里特別要注意，計(jì)時(shí)器是始終一直在走的，如果你的時(shí)間為0，那么就要關(guān)掉定時(shí)器！不然相當(dāng)耗性能 //因?yàn)閠imer是存在data里面的，所以在關(guān)掉時(shí)，也要在data里取出后再關(guān)閉 clearInterval(that.data.timer); //關(guān)閉定時(shí)器之后，可作其他處理codes go here } }, 1000) }) }})好了，這就是簡(jiǎn)單的倒計(jì)時(shí)實(shí)現(xiàn)過程，大家可復(fù)制代碼到微信開發(fā)者工具去驗(yàn)證效果。
以上所述是小編給大家介紹的微信小程序用定時(shí)器實(shí)現(xiàn)倒計(jì)時(shí)效果詳解整合，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
