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
})
},本文内容仅供个人学习/研究/参考使用,不构成任何决策建议或专业指导。分享/转载时请标明原文来源,同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦~感谢您的理解与支持!