MaterialDesign of WeChat applets -- detailed description of input components

This article mainly introduces the MaterialDesign-input component of the mini-program, which has some reference value. if you are interested, you can refer to it. This article mainly introduces the MaterialDesign-input component of the mini-program, which has some reference value. if you are interested, you can refer to it.

This effect is achieved mainly through the input event and the css transform dynamic change.

In the actual debugging process, the detail object of the callback after the bindinput event of the input component is triggered contains the cursor attribute in the simulator and is in the real machine (Android and ios have not been tested) but does not have this attribute. finally, select the length of the value attribute in the detail object to synchronize the number of digits entered.

We recommend that you do not add code that changes css to the bindfocus event.

Preview image:

JS:

// Index. js // Obtain the application instance var app = getApp () Page ({data: {v_username_border: '', // border style v_pwd_border:'' at the bottom of the user input box :'', // border style v_float_username: ''at the bottom of the password input box, // floating text word transform style v_float_pwd:'', num_current_un: 0, // number of currently entered text digits sp_num_current_un :'', // The style isPwdError: false when the number of currently entered text digits exceeds the limit // The text prompt when the password is incorrect during submission}, onLoad: function () {console. log ('onload')}, // get the focus item in the user name input box callback usernameFocus: function (e) {var that = This; console. log (e. detail)}, // User name input box, input the event callback usernameInput: function (e) {console. log (e. detail) this. setData ({v_username_border: 'border-bottom: 1px solid Red', num_current_un: e. detail. value. length}) if (e. detail. value. length! = 0) {this. setData ({v_float_username: 'color: red; transform: translateY (-18.5px) ', sp_num_current_un: 'color: lightseagreen;'}) if (e. detail. value. length> 20) {this. setData ({sp_num_current_un: 'color: orangered; '})} else {this. setData ({v_float_username: 'transform: translateY (0px) ',}) }}, // callback usernameBlur: function (e) {console when the user name input box loses focus. log ("onBlur") this. setData ({v_username_border: 'border-bo Ttom: 1px solid gray '})}, pwdFocus: function (e) {console. log ('onfocal ')}, pwdInput: function (e) {this. setData ({v_pwd_border: 'border-bottom: 1px solid Red', isPwdError: false}) console. log (e. detail) if (e. detail. value. length! = 0) {this. setData ({v_float_pwd: 'color: red; transform: translateY (-18.5px) ',})} else {this. setData ({v_float_pwd: 'transform: translateY (0px) ',}) },pwdblur: function (e) {console. log ("onBlur") this. setData ({v_pwd_border: 'border-bottom: 1px solid gray; '})}, // The logon button simulates the form submission. The form component can be used to replace onLogin: function (e) {this. setData ({isPwdError: true })}})

The above is all the content of this article. I hope it will help you learn and support PHP.

For more information about MaterialDesign-input components of small programs, please follow the PHP Chinese network!