wepy 小程序定时器（验证码倒计时） 数据绑定页面无刷新

Posted 2022-03-11 wanghaiyang

 每次改变数据的时候记得调用  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_timeS</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