MaterialDesign--input component of WeChat applet-Mini Program Development-php.cn

Home

WeChat Applet

Mini Program Development

MaterialDesign--input component of WeChat applet

高洛峰

Feb 20, 2017 pm 03:22 PM

This effect is mainly achieved through input input events and dynamic changes of CSS transform.

During 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 the cursor attribute in the real device (tested on Android, not on ios). attribute, and finally select the length of the value attribute in the detail object to synchronize the number of input digits.

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

Preview image:

MaterialDesign--input component of WeChat applet

JS:

//index.js//获取应用实例var app = getApp()
Page({
  data: {
    v_username_border:&#39;&#39;, //用户输入框底部border样式
    v_pwd_border:&#39;&#39;,  // 密码输入框底部border样式
    v_float_username:&#39;&#39;, // 浮动文字字transform 样式
    v_float_pwd:&#39;&#39;,
    num_current_un:0,  // 当前输入的文本位数
    sp_num_current_un:&#39;&#39;, // 当前输入文本位数超过限制时的样式
    isPwdError:false  // 提交时 密码输入错误时的文本提示
  },
  onLoad: function () {    console.log(&#39;onLoad&#39;)
  },  // 用户名输入框获取焦点时事件回调
  usernameFocus:function(e){    var that = this;    console.log(e.detail)
  },  // 用户名输入框输入时事件回调
  usernameInput:function(e){    console.log(e.detail)     this.setData({
      v_username_border:&#39;border-bottom:1px solid red&#39;,
     num_current_un:e.detail.value.length
    })    if(e.detail.value.length!=0){       this.setData({
        v_float_username:&#39;color:red ;transform: translateY(-18.5px)&#39;,
        sp_num_current_un:&#39;color:lightseagreen;&#39;
      })      if(e.detail.value.length>20){        this.setData({
          sp_num_current_un:&#39;color:orangered;&#39;
        })
      }
    }else{      this.setData({
        v_float_username:&#39;transform: translateY(0px)&#39;,
      })
    }
  },  // // 用户名输入框失去焦点时回调
  usernameBlur:function(e){    console.log("onBlur")     this.setData({
      v_username_border:&#39;border-bottom:1px solid grey&#39;
    })
  },
  pwdFocus:function(e){    console.log(&#39;onFocus&#39;)
  },
  pwdInput:function(e){    this.setData({
      v_pwd_border:&#39;border-bottom:1px solid red&#39;,
      isPwdError:false
    })    console.log(e.detail)    if(e.detail.value.length!=0){      this.setData({
        v_float_pwd:&#39;color:red ; transform: translateY(-18.5px)&#39;,
      })
    }else{      this.setData({
        v_float_pwd:&#39;transform: translateY(0px)&#39;,
      })
    }
  },
   pwdBlur:function(e){    console.log("onBlur")     this.setData({
      v_pwd_border:&#39;border-bottom:1px solid grey; &#39;
    })
  },// 登录按钮模拟表单提交  可用form组件代替
  onLogin:function(e){    this.setData({
      isPwdError:true
    })
  }
})

More WeChat Mini Program MaterialDesign- For articles related to -input components, please pay attention to the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn