您好,登錄后才能下訂單哦!
今天就跟大家聊聊有關(guān)使用uni-app如何實(shí)現(xiàn)獲取驗(yàn)證碼倒計(jì)時(shí)功能,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結(jié)了以下內(nèi)容,希望大家根據(jù)這篇文章可以有所收獲。
頁(yè)面部分是一個(gè)三目運(yùn)算,codeTime是倒計(jì)時(shí)的時(shí)間。
<template> <view> <view class="three"> <view class="get" @tap="getCheckNum()"> <text>{{!codeTime?'獲取驗(yàn)證碼':codeTime+'s'}}</text> </view> <view class="all"> <view class="left">驗(yàn)證碼</view> <input v-model="mydata.checkNum" placeholder="請(qǐng)輸入驗(yàn)證碼"/> </view> <button class="btn" @tap='sure'>確認(rèn)</button> </view> </view> </template>
具體思路:
三目運(yùn)算,判斷codeTime的值,當(dāng)為0的時(shí)候顯示文字“獲取驗(yàn)證碼”,大于0的時(shí)候顯示驗(yàn)證碼的倒計(jì)時(shí)。codeTime默認(rèn)為0.
這里有個(gè)問(wèn)題就是,怎么阻止用戶在倒計(jì)時(shí)還沒(méi)結(jié)束的時(shí)候一直點(diǎn)擊,影響倒計(jì)時(shí)。
解決辦法是寫(xiě)個(gè)判斷,當(dāng)codeTime大于60的時(shí)候,彈窗提示用戶不能重復(fù)獲取驗(yàn)證碼。當(dāng)?shù)褂?jì)時(shí)運(yùn)行完了之后要清除倒計(jì)時(shí)。
代碼:
<script> export default { data() { return { codeTime:0, } }, methods: { getCheckNum(){ if(this.codeTime>0){ uni.showToast({ title: '不能重復(fù)獲取', icon:"none" }); return; }else{ this.codeTime = 60 let timer = setInterval(()=>{ this.codeTime--; if(this.codeTime<1){ clearInterval(timer); this.codeTime = 0 } },1000) } } } }
css樣式:
.all{ margin: 30rpx; border-bottom: 2rpx solid #EEEEEE; display: flex; flex-wrap: nowrap; } .left{ margin-bottom: 30rpx; margin-right: 40rpx; width: 150rpx; } .three{ background-color: white; width: 92%; border-radius: 10rpx; padding: 20rpx 0; margin: 20rpx auto; position: relative; } .btn{ background-color: orange; font-size: 28rpx; width: 160rpx; height: 70rpx; line-height: 70rpx; margin-top: 40rpx; color: white; font-weight: 600; } .get{ position: absolute; top: 40rpx; right: 30rpx; background-color: orange; height: 70rpx; line-height: 70rpx; color: white; border-radius: 10rpx; padding: 0 20rpx; }
看完上述內(nèi)容,你們對(duì)使用uni-app如何實(shí)現(xiàn)獲取驗(yàn)證碼倒計(jì)時(shí)功能有進(jìn)一步的了解嗎?如果還想了解更多知識(shí)或者相關(guān)內(nèi)容,請(qǐng)關(guān)注億速云行業(yè)資訊頻道,感謝大家的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。