이번 글은 아이오닉 학습일기의 인증코드 카운트다운 구현을 주로 소개하고 참고용으로 올려드립니다.
머리말
앱을 만들려면 이 기능이 꼭 들어가게 되니까 인터넷으로 선배님들의 정보를 많이 찾아보다가 나에게 가장 적합하고 이해하기 쉬운 것을 찾아서 구현해봤습니다. 기능. 미래를 위해 이 일기를 씁니다. 스스로 검토하고 다른 사람으로부터 배웁니다. 사용자가 조작하기 편리하고 실명제를 따르기도 매우 편리합니다. 문제는 버튼을 디자인할 때 입력된 인증번호 옆에 표시해야 하고 사용자가 클릭하면 카운트다운이 표시되어야 한다는 것입니다. 시작되고 버튼을 클릭할 수 없게 됩니다
클릭 전 클릭 후 이 일기에는 html, ts 및 scss를 포함하여 1페이지 미만의 파일만 포함됩니다(제 페이지 이름은 reg이며, 상황에 따라 조정)
reg.ts는 html로 정의됩니다. 얻을 수 있는 정보
//验证码倒计时 verifyCode: any = { verifyCodeTips: "获取验证码", countdown: 60, disable: true }reg.html 디자인 레이아웃
위 그림은 제가 디자인한 것입니다. 여기서는 키 코드만 찍었습니다.
<button item-right ion-button clear (click)="getCode()" [disabled]="!verifyCode.disable">{{verifyCode.verifyCodeTips}}</button>
Click 이벤트 getCode(), 버튼 클릭 가능 여부 설정 [비활성화], 부울 값 판단 사용, 주요 표시 내용은 verifyCode.verifyCodeTips, 즉 나중에 구현해야 할 텍스트 정보와 카운트다운입니다
reg.ts 메소드 추가 및 카운트다운 처리버튼을 클릭하면 getCode() 메소드가 트리거되어 이 메소드가 트리거됩니다. 그런 다음 먼저 비활성화 값을 false로 변경하고 버튼을 클릭할 수 없도록 설정하고, 그런 다음 settime 메소드
getCode() { //点击按钮后开始倒计时 this.verifyCode.disable = false; this.settime(); }
settime()을 실행하여 카운트다운 기능을 구체적으로 구현합니다//倒计时
settime() {
if (this.verifyCode.countdown == 1) {
this.verifyCode.countdown = 60;
this.verifyCode.verifyCodeTips = "获取验证码";
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초마다 1씩 감소하는 간단한 카운트다운 기능입니다. 중요한 것은 카운터가 1인지 확인하는 것입니다. 1이면 verifyCode의 세 가지 정보가 다시 초기화됩니다. 위 내용은 앞으로 모든 분들께 도움이 되기를 바랍니다.
관련 기사:
SpringMVC를 사용하여 vue 도메인 간 요청 해결 Vue 구성 요소 및 경로의 수명 주기(자세한 튜토리얼)위 내용은 Ionic에서 인증 코드 카운트다운을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!