美文网首页小程序
小程序 - 点击获取手机验证码+style切换

小程序 - 点击获取手机验证码+style切换

作者: 泛滥的小愤青 | 来源:发表于2020-08-07 17:47 被阅读0次
    示意图:
    点击前.png
    点击后.png

    wxml

    <button disabled='{{disabled}}' data-id="2" bindtap="getVerificationCode">
    {{time}}
    </button>
    

    js

    var interval = null //倒计时函数
    Page({
     data: {
     fun_id:2,
     time: '获取验证码', //倒计时 
     currentTime:61
     }, 
     getCode: function (options){
     var that = this;
     var currentTime = that.data.currentTime
     interval = setInterval(function () {
     currentTime--;
     that.setData({
     time: currentTime+'秒'
     })
     if (currentTime <= 0) {
     clearInterval(interval)
     that.setData({
      time: '重新发送',
      currentTime:61,
      disabled: false
     })
     }
     }, 1000) 
     },
     getVerificationCode(){
     this.getCode();
     var that = this
     that.setData({
     disabled:true
     })
     },
     
    })
    

    wxss 自行补充

    相关文章

      网友评论

        本文标题:小程序 - 点击获取手机验证码+style切换

        本文链接:https://www.haomeiwen.com/subject/llqqdktx.html