作者:tina田小甜Shirley | 来源:互联网 | 2023-01-17 19:24
每次改变数据的时候记得调用 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}}Sview>
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 }