This article mainly introduces the implementation of verification code countdown in Ionic Learning Diary. Now I share it with you and give it as a reference.
Preface
If you want to make an app, this function will definitely be involved, so I searched a lot of senior information on the Internet and found one that is most suitable for me. Implement this function in an easy-to-understand way, and write this diary to facilitate future review and learning from others
Ideas
When users register, many apps nowadays choose Binding a mobile phone number for registration is a very good idea. It is convenient for users to operate, and it is also very convenient to comply with the real-name system. When designing the button, it needs to be displayed next to the input verification code, and after the user clicks, it will start. Count down and turn the button into an unclickable effect
//验证码倒计时 verifyCode: any = { verifyCodeTips: "获取验证码", countdown: 60, disable: true }
reg.html design layout
The above picture is designed by myself, only the key code is taken herereg .ts Add method and countdown processing
When the button is clicked, the getCode() method will be triggered. After triggering the method, first change the value of disable to false, set the button to be unclickable, and then trigger settime. MethodgetCode() { //点击按钮后开始倒计时 this.verifyCode.disable = false; this.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); }
Use SpringMVC to solve vue cross-domain requests
The life cycle of Vue components and Route (detailed tutorial)
Implementing user permission control in Vue2.0
The above is the detailed content of Ionic implements verification code countdown. For more information, please follow other related articles on the PHP Chinese website!