前言
要做一個(gè)app的話茉贡，肯定會涉及到這個(gè)功能卖擅，所以就從網(wǎng)上找了許多前輩的資料蒜危，找到了一個(gè)最適合自己并且方便理解的實(shí)現(xiàn)此功能呼伸，寫此日記方便未來自己復(fù)習(xí)和其他人學(xué)習(xí)
思路
在用戶注冊的時(shí)候身冀，時(shí)下不少app都選擇了綁定手機(jī)號注冊，這是一個(gè)非常好的想法蜂大，便捷用戶操作闽铐，也很方便遵循實(shí)名制的問題，在設(shè)計(jì)按鈕的時(shí)候奶浦，需要讓他顯示在輸入驗(yàn)證碼的旁邊兄墅，并在用戶點(diǎn)擊后，開始倒計(jì)時(shí)澳叉，并將按鈕變成無法點(diǎn)擊效果
在本篇日記中只涉及到1個(gè)page下的文件隙咸，包括html、ts和scss（我的頁面名為reg成洗，可根據(jù)自己的具體情況進(jìn)行調(diào)整）
在reg.ts定義在html中可以獲取到的信息
//驗(yàn)證碼倒計(jì)時(shí)
verifyCode: any = {
verifyCodeTips: "獲取驗(yàn)證碼",
countdown: 60,
disable: true
}
reg.html設(shè)計(jì)布局
上面的圖片是我自己設(shè)計(jì)的五督，這里只取關(guān)鍵代碼
<button item-right ion-button clear (click)="getCode()" [disabled]="!verifyCode.disable">{{verifyCode.verifyCodeTips}}</button>
點(diǎn)擊事件getCode()，設(shè)置[disabled]是否可以點(diǎn)擊按鈕瓶殃，用boolean值判斷充包，主要顯示的內(nèi)容是verifyCode.verifyCodeTips，即文本信息和之后需要實(shí)現(xiàn)的倒計(jì)時(shí)
reg.ts添加方法和倒計(jì)時(shí)處理
當(dāng)點(diǎn)擊button后將觸發(fā)getCode()方法，觸發(fā)該方法后首先將disable的值改變?yōu)閒alse基矮，將按鈕設(shè)為不可點(diǎn)擊淆储，然后觸發(fā)settime方法
getCode() {
//點(diǎn)擊按鈕后開始倒計(jì)時(shí)
this.verifyCode.disable = false;
this.settime();
}
settime()具體實(shí)現(xiàn)倒計(jì)時(shí)功能
//倒計(jì)時(shí)
settime() {
if (this.verifyCode.countdown == 1) {
this.verifyCode.countdown = 60;
this.verifyCode.verifyCodeTips = "獲取驗(yàn)證碼";
this.verifyCode.disable = true;
return;
} else {
this.verifyCode.countdown--;
}
this.verifyCode.verifyCodeTips = "重新獲取"+this.verifyCode.countdown+"秒";
setTimeout(() => {
this.verifyCode.verifyCodeTips = "重新獲取"+this.verifyCode.countdown+"秒";
this.settime();
}, 1000);
}
用每過1秒計(jì)數(shù)器減1，簡單的倒計(jì)時(shí)功能家浇，重要的是判斷計(jì)數(shù)器是否為1本砰，當(dāng)為1后就將verifyCode的3個(gè)信息重新初始化
