Ionic implements verification code countdown

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

##Before clicking

After clicking

This diary only involves files under one page, including html, ts and scss (my page name is reg, which can be adjusted according to your specific situation)

is defined in reg.ts Information that can be obtained in html

reg.html design layout

The above picture is designed by myself, only the key code is taken here

Click event getCode(), set [disabled] whether the button can be clicked, and use the boolean value to judge. The main content displayed is verifyCode.verifyCodeTips, which is the text information and the countdown that needs to be implemented later

reg .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. Method

settime() specifically implements the countdown function

Use the counter to decrement by 1 every 1 second. For a simple countdown function, the important thing is to determine whether the counter is 1. When it is 1, it Re-initialize the three pieces of verifyCode information

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

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!