热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

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

每次改变数据的时候记得调用this.$apply()验证码倒计时使用的vant-weappUI组件wxml:1<van-colspan10st

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

 


推荐阅读
author-avatar
tina田小甜Shirley
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有