介绍 & lt; template>
& lt; view>
& lt;视图类=皌hree"祝辞
& lt;视图类=癵et"@tap=癵etCheckNum()“比;
& lt; text> {{! codeTime& # 63; & # 39;获取验证码& # 39;:codeTime + & # 39; & # 39;}} & lt;/text>
& lt;/view>
& lt;视图类=癮ll"祝辞
& lt;视图类=發eft"祝辞验证码& lt;/view>
& lt;输入v模型=癿ydata.checkNum"占位符=扒胧淙胙橹ぢ搿?比;
& lt;/view>
& lt;按钮类=癰tn"@tap=& # 39;确定# 39;祝辞确认& lt;/button>
& lt;/view>
& lt;/view>
& lt;/template> & lt; script>
出口默认{
数据(){
返回{
codeTime: 0,
}
}，
方法:{
getCheckNum () {
如果(this.codeTime> 0) {
uni.showToast ({
标题:& # 39;不能重复获取& # 39;,
图标:“none"
});
返回;
其他}{
这一点。codeTime=60
让计时器=setInterval()=祝辞{
this.codeTime——;
如果(this.codeTime<1) {
clearInterval(计时器);
这一点。codeTime=0
}
}, 1000)
}
}
}
} 所有{
保证金:30 rpx;
边界底部:2 rpx固体继续;
显示:flex;
flex-wrap: nowrap;}
}
.left {
margin-bottom: 30 rpx;
margin-right: 40 rpx;
宽度:150 rpx;
}
.three {
背景颜色:白色;
宽度:92%;
border - radius: 10 rpx;
填充:20 rpx 0;
保证金:20 rpx汽车;
位置:相对;
}
.btn {
背景颜色:橙色;
字体大小:28 rpx;
宽度:160 rpx;
身高:70 rpx;
行高:70 rpx;
margin-top: 40 rpx;
颜色:白色;
粗细:600;
}
. get {
位置:绝对的;
上图:40 rpx;
右:30 rpx;
背景颜色:橙色;
身高:70 rpx;
行高:70 rpx;
颜色:白色;
border - radius: 10 rpx;
填充:0 20 rpx;
}
今天就跟大家聊聊有关使用uni-app如何实现获取验证码倒计时功能,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
页面部分是一个三目运算,codeTime是倒计时的时间。
<强>具体思路:
三目运算,判断codeTime的值,当为0的时候显示文字”获取验证码”,大于0的时候显示验证码的倒计时.codeTime默认为0。
这里有个问题就是,怎么阻止用户在倒计时还没结束的时候一直点击,影响倒计时。
解决办法是写个判断,当codeTime大于60的时候,弹窗提示用户不能重复获取验证码。当倒计时运行完了之后要清除倒计时。
代码:
css样式:
看完上述内容,你们对使用uni-app如何实现获取验证码倒计时功能有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注行业资讯频道,感谢大家的支持。
