码迷,mamicode.com
首页 > 微信 > 详细

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

时间:2019-07-03 10:43:40      阅读:392      评论:0      收藏:0      [点我收藏+]

标签:eth   clear   get   EAP   span   ant   set   倒计时   false   

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

 

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

标签:eth   clear   get   EAP   span   ant   set   倒计时   false   

原文地址:https://www.cnblogs.com/wanghaiyang/p/11124696.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!