wxml

<view class="li-send" bindtap="onSend" wx:if="{{send}}">發(fā)送驗證碼</view> <view class="li-send"wx:else>{{seconds}}s后發(fā)送</view>

wxss

/** * 頁面的初始數(shù)據(jù) */ data: {// 發(fā)送按鈕顯示send:true,// 當前倒計時秒數(shù)seconds:"",// 總秒數(shù)max_seconds:59, },/** * 發(fā)送驗證碼 */ onSend(){var that=this;// 獲取總秒數(shù)var seconds=this.data.max_seconds;this.setData({// 顯示倒計時send:false,// 設置秒數(shù)seconds:seconds,})// 設置定時器var t=setInterval(function(){// 如果秒數(shù)小于0if(seconds<=0){// 停止定時器clearInterval(t);that.setData({// 顯示發(fā)送按鈕send:true,})// 停止執(zhí)行return;}// 秒數(shù)減一seconds--;that.setData({// 更新當前秒數(shù)seconds:seconds,})},1000) },

效果

總結

以上是生活随笔為你收集整理的微信小程序发送验证码60秒倒计时的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。