wepy 小程序定时器(验证码倒计时) 数据绑定页面无刷新
时间:2019-07-03 10:43:40
收藏:0
阅读:392
每次改变数据的时候记得调用 this.$apply()
验证码倒计时
使用的vant-weapp UI组件
wxml:
1 <van-col span="10" style=‘text-align:center‘> 3 <view wx:if="{{sendAuthCode}}"bindtap="getCode()">获取验证码</view> 6 <view wx:elif="{{!sendAuthCode}}">{{auth_time}}S</view> 8 </van-col>
JS:
1 data = { 2 auth_time: 5,//倒计时 3 sendAuthCode: true,//控制获取验证码 4 }; 5 methods = { 6 getCode () {//获取验证码 7 let that = this 8 this.sendAuthCode = false 9 var auth_timetimer = setInterval(() => { 10 this.auth_time--; 11 that.$apply() 12 console.log(this.auth_time) 13 if (this.auth_time <= 0) { 14 this.sendAuthCode = true; 15 that.$apply() 16 clearInterval(auth_timetimer); 17 } 18 }, 1000) 19 } 20 }
评论(0)