版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/yechaoa/article/details/81985664
使用场景:获取验证码
1,data中定义参数
data: {
color: "#ff6f10",
disabled: false,
getCode: "获取验证码",
},
2,wxml中的引用
<button size="mini" type="default" plain="true" class='form-code-btn' bindtap='sendCode' style='color:{{color}}; border-color: {{color}};background-color:#FFF;' disabled="{{disabled}}">{{getCode}}</button>
3,定义的事件sendCode
sendCode: function(e) {
var that = this;
var times = 0
var i = setInterval(function() {
times++
if (times >= 60) {
that.setData({
color: "#ff6f10",
disabled: false,
getCode: "获取验证码",
})
clearInterval(i)
} else {
that.setData({
getCode: "重新获取" + times + "s",
color: "#999",
disabled: true
})
}
}, 1000)
}
每秒执行一次,并定义一个变量记录
60s之内,设置文字显示、颜色、不可点击
之后,同上,并且清除定时器,即clearInterval(i)