Shulou(Shulou.com)05/31 Report--

This article mainly introduces "how to use the MaterialDesign input components in WeChat Mini Programs". In the daily operation, I believe many people have doubts about how to use the MaterialDesign input components in WeChat Mini Programs. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts about "how to use the MaterialDesign input components in WeChat Mini Programs". Next, please follow the editor to study!

This effect is mainly achieved through input input events combined with the transform dynamic change of css.

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

The bindfocus event is best not to add code that changes the css.

Preview the picture:

JS:

/ / index.js// gets the application instance var app = getApp () Page ({data: {border style at the bottom of the user input box, / / border style at the bottom of the password input box, num_current_un:0 / / the number of text digits currently entered sp_num_current_un:'', / / the style when the number of text digits currently entered exceeds the limit isPwdError:false / / text prompt when the password is entered incorrectly}, onLoad: function () {console.log ('onLoad')}, / / event callback usernameFocus:function (e) {var that = this when the user name input box gets focus Console.log (e.detail)}, / / 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.username input 0) {this.setData ({v_float_username:'color:red) when entered in the user name input box 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.log ("onBlur") this.setData ({v_username_border:'border-bottom:1px solid grey'})}, pwdFocus:function (e) {console.log ('onFocus')} when the user name input box loses focus PwdInput:function (e) {this.setData ({v_pwd_border:'border-bottom:1px solid red', isPwdError:false}) console.log (e.detail) if (e.detail.value.value.promothexamples) {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 grey The login button simulates form submission with form components instead of onLogin:function (e) {this.setData ({isPwdError:true})}}). At this point, the study on "how to use MaterialDesign input components in WeChat Mini Programs" is over, hoping to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.