在微信小程序中怎样实现获取验证码的倒计时功能捏,倒计时的原理是一样一样的,就是某些地方需要注意。
第一步:结构
<view class='getcode' wx:if="{{isGet == false}}" bindtap='getCode'>获取验证码</view>
<view class='getcode' wx:if="{{isGet == true}}">{{sec}}s后重新发送</view>
注意:微信小程序中要用到两个按钮,不像HTML里面直接一个按钮就解决了。如果非要一个按钮的话,就需要把不变的内容即“获取验证码”与“秒后重新发送”装在一个数组里面,然后判断什么时候选择显示哪一个
备注:用wx:if条件渲染来判断某个按钮是否显示与隐藏。。{{ sec }}是要动态显示的秒数,只绑定一个view的点击事件就不怕重复点击了。。。
第二步:样式就不用说了,自己定义, 然后js代码:
// pages/mine/wallet/getcash/getcash.js
Page({
data: {
isGet: false,
sec: 30
},
getCode () {
var self = this
self.setData({isGet: true})
var remain = 30;
var time = setInterval(function() {
if (remain == 1) {
clearInterval(time)
self.setData({
sec: 30,
isGet: false
})
return false
}
remain --;
self.setData({
sec: remain
})
}, 1000)
}
})
最后就成功了。
是不是很简单,用习惯了vue的小伙伴一开始写这个是不是会没思路呢哈哈