uniapp验证码倒计时60s的实现
发送验证码时,不能让客户一直发送验证码,所以需要设置一个60s后才能发送一次;具体代码实现:因为app和其他app不太一样,所以需要选择以这样的方式展示是时间,但是js逻辑代码是一样的;
data
show_again: 0, // 显示发送验证码||请稍后按钮
count: "", // 等待时间
timer: null, //定时器
html
<button class="blue send" v-if="show_again==0" @click="sendCode">发送验证码</button>
<button class="blue send" v-if="show_again==1" @click="sendCodeAgain">请稍后重试</button>
js
sendCode(){
const count = 60;
if (!this.timer) {
this.count = count;
_this.show_again = 1;
this.timer = setInterval(() => {
if (this.count > 0 && this.count <= count) {
this.count--;
} else {
_this.show_again = 0;
clearInterval(this.timer);
this.timer = null;
}
}, 1000)
}
},
sendCodeAgain() {
const _this = this;
uni.showToast({
title: `请稍后重试(${_this.count})`,
icon: "none",
duration: 1500
})
},本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!