美文网首页微信小程序
微信小程序 短信验证码

微信小程序 短信验证码

作者: AAA_si | 来源:发表于2022-03-23 15:52 被阅读0次

    短信验证码 倒计时90秒 归0后恢复 获取验证码

    code.png

    1.login.js

    data: {
        // 验证码
        code:'', 
        inter:'', // 定时器
        codeshow:true,
        sendTime:90,
    },
    getCode:function(){
      this.data.inter = setInterval(function() {
        this.setData({
          codeshow: false,
          sendTime: this.data.sendTime - 1
        });
        if (this.data.sendTime < 0) {
          clearInterval(this.data.inter)
          this.setData({
              codeshow: true,
              sendTime: 90
          });
         }
      }.bind(this), 1000);
    }
    
    

    2.login.wxml

    <view class="inputCode">
       <input class="code" value="{{code}}" placeholder="请输入验证码" type="number" maxlength="6" />
       <view class="btncode" wx:if="{{codeshow}}" bindtap="getCode">获取验证码</view>
       <view class="btncode" wx:if="{{!codeshow}}">{{sendTime}}s</view>
    </view>
    

    相关文章

      网友评论

        本文标题:微信小程序 短信验证码

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