微信验证码效果

2021-12-02 23:50:00

首先，需要一个验证码的界面：

wxml:

<view class="item">
        <input type="number" value=\'{{phone}}\' bindinput="bindKeyInput" data-filed="phone"  placeholder="手机号" name="phone" />
        <i class="iconfont icon-denglu"></i>
      </view>
      <view class="item code">
        <view class=\'pwd\'>
          <input type="number" placeholder="验证码" name="code" placeholder-class="placeholderClass" />
          <i class="iconfont icon-APPicon-"></i>
        </view>
        <view class=\'send {{!isclick?"active":""}}\' bindtap=\'sendTo\'>{{!isclick?value+\'秒后可以重新获取\':\'发送\'}}</view>
      </view>
</view>

样式比较简陋就不贴出来了

JS文件下定义

Page({
  data: {
    isclick:true,
    value:60,
    phone:"",
  },
  //事件处理函数
  bindKeyInput(e)
  {
    this.data.phone=e.detail.value;
  },
  sendTo(){
    var that=this;
    let timer=setInterval(function(){
      if(that.data.value>0)
      {
        var time=that.data.value-1;
        that.setData({
          value:time,
          isclick:false
        })
      }
      else{
        clearInterval(timer);
        that.setData({
          value:60,
          isclick:true
        })
      }
    },1000)
  }
})

利用isclick判断发送框的样式，计时器获得倒计时，效果如下：

样式方面就是这样，如要实现验证码登录，就在sendto方法下先调用发送验证码的接口，传入phone就可以了，然后在登录方法下验证即可

发表于

2019-12-27 11:32

番外

阅读(145)

编辑