微信验证码效果
时间:2019-12-27 13:38:04
收藏:0
阅读:103
首先,需要一个验证码的界面:
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就可以了,然后在登录方法下验证即可
评论(0)