wepy 小程序定时器(验证码倒计时) 数据绑定页面无刷新
每次改变数据的时候记得调用 this.$apply()
验证码倒计时
使用的vant-weapp UI组件
wxml:
<van-col span="10" style='text-align:center'>
<view wx:if="{{sendAuthCode}}"bindtap="getCode()">获取验证码</view>
<view wx:elif="{{!sendAuthCode}}">{{auth_time}}S</view>
</van-col>
JS:
data = {
auth_time: 5,//倒计时
sendAuthCode: true,//控制获取验证码
};
methods = {
getCode () {//获取验证码
let that = this
this.sendAuthCode = false
var auth_timetimer = setInterval(() => {
this.auth_time--;
that.$apply()
console.log(this.auth_time)
if (this.auth_time <= 0) {
this.sendAuthCode = true;
that.$apply()
clearInterval(auth_timetimer);
}
}, 1000)
}
}
wepy 小程序定时器(验证码倒计时) 数据绑定页面无刷新的更多相关文章
- 【WePY小程序框架实战二】-页面结构
[WePY小程序框架实战一]-创建项目 项目结构 |-- dist |-- node_modules |-- src | |-- components |-- a.wpy |-- b.wpy |-- ...
- 微信小程序实现验证码倒计时效果
效果图 wxml <input class='input-pwd' placeholder="新密码" placeholder-style='color: #000' pas ...
- 微信小程序获取验证码倒计时
getVerificationCode: function() { var that = this; var currentTime = that.data.currentTime; that.set ...
- 【WePY小程序框架实战三】-组件传值
[WePY小程序框架实战一]-创建项目 [WePY小程序框架实战二]-页面结构 父子组件传值 静态传值 静态传值为父组件向子组件传递常量数据,因此只能传递String字符串类型. 父组件 (paren ...
- 【WePY小程序框架实战四】-使用async&await异步请求数据
[WePY小程序框架实战一]-创建项目 [WePY小程序框架实战二]-页面结构 [WePY小程序框架实战三]-组件传值 async await 是对promise的近一步优化,既解决了promise链 ...
- 快速入门 WePY 小程序【转】
一.WePY介绍 WePY 是 腾讯 参考了Vue 等框架对原生小程序进行再次封装的框架,更贴近于 MVVM 架构模式, 并支持ES6/7的一些新特性. 二.WePY 使用 1.WePY的安装或更新都 ...
- 微信小程序60秒倒计时
微信小程序发送短信验证码后60秒倒计时功能,效果图: 完整代码 index.wxml <!--index.wxml--> <view class="container&qu ...
- 【小程序开放激励视频】--wepy小程序添加激励视频
小程序开放激励视频是对小程序开发者一个福音,小程序开发者可以完成一些变现,以增加收入! 本文章针对已经有开发经验或者正在进行小程序开发的同学~ 官方文档:激励视频广告 定义页面变量,用于创建视频实例 ...
- wepy小程序实现选项卡
先上效果: 本文是基于前面几篇文章: 使用wepy开发微信小程序商城第一篇:项目初始化 使用wepy开发微信小程序商城第二篇:路由配置和页面结构 使用wepy开发微信小程序商城第三篇:购物车(布局篇) ...
随机推荐
- pt-archiver 归档数据
pt-archiver 参数说明pt-archiver是Percona-Toolkit工具集中的一个组件,是一个主要用于对MySQL表数据进行归档和清除工具.它可以将数据归档到另一张表或者是一个文件中 ...
- thread.start和threadstart.invoke的区别
new Thread(() =>refreshDGVdelegate(App.StockList)).Start();//在新线程中执行操作 new ThreadStart(() => r ...
- xaml与CSS中的Margin顺序不同
XAML中 Margin:左 上 右 下 CSS中 Margin:上 右 下 左
- 自己写个tween
public Vector3 begin,end;//起始终止坐标 public float BtoE_time;//用时 float timer,lerp;//计时器和进度值 void Update ...
- P1081 检查密码
P1081 检查密码 转跳点:
- 使用 Dashboard【转】
上一节我们完成了 Kubernetes Dashboard 的安装,本节就来实践一下. Dashboard 界面结构 Dashboard 的界面很简洁,分为三个大的区域. 顶部操作区在这里用户可以搜索 ...
- SSM文件上传要点总结
文件的上传要点: 1.表单方面:enctype="multitype/form-data" 编码方式选择混编码 input 类型采用file 2.实体类一定要进行序列化,也就是im ...
- 八十一、SAP中的ALV的简介(ABAP List Viewer)
一.ALV是SAP中的一个表格,全称为:ABAP List Viewer或者SAP List Viewer,就是可视化表格. ALV是SAP系统中心的列表标准,可以在ABAP程序中进行报表输出.除去列 ...
- 十九、SAP查询所有数据库表的所有数据
一.我们打款SAP自带的一个演示数据库SCARR 二.表结构如下 三.代码如下 四.执行结果如下 我们对比一下数据库的内容,很perfect 不忘初心,如果您认为这篇文章有价值,认同作者的付出,可以微 ...
- 114-PHP判断类变量是否相同
<?php class ren{ //定义人类 } class mao{ //定义人类 } $ren=new ren(); //实例化人类的对象 $ren_a=new ren(); //实例化人 ...