溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“微信小程序如何實現短信驗證碼倒計時”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“微信小程序如何實現短信驗證碼倒計時”吧！
初始效果
當點擊按鈕時候設置禁止點擊效果：如下圖
話不多說，直接上代碼
1.wxml部分
<view>
<block wx:if="{{Num==60 || Num==-1}}">
<button bindtap="countDown">獲取驗證碼</button>
</block>
<block wx:else>
<button disabled='{{isDisabled}}'>{{Num}}s后重新發送</button>
</block>
</view>2.js部分
// pages/push2/push2.js
Page({
/**
* 頁面的初始數據
*/
data: {
timer: "",
Num: '60',
isDisabled:false
},
/**
* 驗證碼倒計時
*/
countDown: function() {
var that=this
var Num=that.data.Num
var isDisabled=this.data.isDisabled
var timer=setInterval(function(){
Num-=1;
that.setData({
Num:Num,
isDisabled:true
})
if(Num<=-1){
clearInterval(timer)
that.setData({
Num:60,
isDisabled:false
})
}
},100)
},
/**
* 生命周期函數--監聽頁面加載
*/
onLoad: function (options) {
},
/**
* 生命周期函數--監聽頁面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函數--監聽頁面顯示
*/
onShow: function () {
},
/**
* 生命周期函數--監聽頁面隱藏
*/
onHide: function () {
},
/**
* 生命周期函數--監聽頁面卸載
*/
onUnload: function () {
},
/**
* 頁面相關事件處理函數--監聽用戶下拉動作
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函數
*/
onReachBottom: function () {
},
/**
* 用戶點擊右上角分享
*/
onShareAppMessage: function () {
}
})感謝各位的閱讀，以上就是“微信小程序如何實現短信驗證碼倒計時”的內容了，經過本文的學習后，相信大家對微信小程序如何實現短信驗證碼倒計時這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
