微信小程序短信验证码倒计时
别等风 人气:0初始效果
当点击按钮时候设置禁止点击效果:如下图
话不多说,直接上代码
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/push1/push1.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 () { } })
加载全部内容