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

MaterialDesign--input component of WeChat applet

高洛峰

Release： 2017-02-20 15:22:06

Original

1389 people have browsed it

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
    })
  }
})

Copy after login

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