倒計時功能是一個比較常見的功能,比如用戶獲取驗證碼就需要用到。這里記錄一下在微信小程序里面倒計時功能的簡單實現
直接看看代碼吧
-
//倒計時60秒
-
function countDown(that,count) {
-
if (count == 0) {
-
that.setData({
-
timeCountDownTop: '獲取驗證碼',
-
counting:false
-
})
-
return;
-
}
-
-
that.setData({
-
counting:true,
-
timeCountDownTop: count + '秒后重新獲取',
-
})
-
-
setTimeout(function(){
-
count--;
-
countDown(that, count);
-
}, 1000);
-
}
在需要倒計時的地方調用
-
Page({
-
data:{
-
counting:false
-
},
-
-
//生成驗證碼
-
generateVerifyCode:function() {
-
var that = this;
-
if (!that.data.counting) {
-
wx.showToast({
-
title: '驗證碼已發送',
-
})
-
-
//開始倒計時60秒
-
countDown(that, 60);
-
}
-
},
-
})
下面簡單介紹下功能的實現
首先倒計時的方法是寫在Page的外面,這個別搞錯了 實現倒計時關鍵的地方在于setTimeout方法,也即下面這段代碼。setTimeout方法可以設置在指定的時間間隔執行某個函數。應用的格式是setTimeout(function(),time),function就是對應要執行的方法,time就是時間間隔,這里的1000表示1000毫秒,也就是間隔1秒執行一次countDown方法。
-
setTimeout(function(){
-
count--;
-
countDown(that, count);
-
}, 1000);
countDown方法中利用count字段來設置倒計時的時間,比如這里是60秒 countDown方法中把that也傳遞進去是為了在倒計時狀態改變時利用setData方法更新頁面 countDown方法中利用counting字段來判斷是否已經在倒計時了,避免重復開始倒計時
倒計時結束是通過count來判斷,通過return直接退出 以上就是微信小程序里面倒計時功能的簡單實現啦,希望對大家有用!
|