原创：微信小程序之MaterialDesign--input组件

wudengzan 发布于2019-08-20 13:56 / 2171人阅读

摘要：作者来自原文地址主要通过输入事件配合的动态改变实现这种效果。实际调试过程中，组件事件触发后回调的对象，在模拟器中含有属性，在真机中测过安卓，没测过却没有该属性，最后选择对象中的属性的值的长度来同步输入的位数。事件最好不要添加改变的代码。

作者：jeffer
来自：原文地址

主要通过input输入事件配合css的transform动态改变实现这种效果。

实际调试过程中，input组件bindinput事件触发后回调的detail对象，在模拟器中含有cursor属性，在真机中（测过安卓，ios没测过）却没有该属性，最后选择detail对象中的value属性的值的长度来同步输入的位数。

bindfocus事件最好不要添加改变css的代码。

预览图片：

JS：

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

源码地址https://github.com/jeffer0323...

GPU云服务器云服务器微信小程序组件微信小程序微信小程序支付微信小程序部署

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81324.html

原创：微信小程序之MaterialDesign--input组件

摘要：作者来自原文地址主要通过输入事件配合的动态改变实现这种效果。实际调试过程中，组件事件触发后回调的对象，在模拟器中含有属性，在真机中测过安卓，没测过却没有该属性，最后选择对象中的属性的值的长度来同步输入的位数。事件最好不要添加改变的代码。作者：jeffer 来自：原文地址主要通过input输入事件配合css的transform动态改变实现这种效果。实际调试过程中，input组件bi...

ivan_qhz 2019-08-14 17:17 评论0 收藏0
如何写一个微信小程序组件

摘要：组件三要素组件的三要素就是小程序定义的三种文件因为本身就是模块化开发，所以这天然有利于组件化。日历组件所以利用和就可以打造一款组件了。这样就完成了一个组件编写，任何需要用到的地方都可以引入了。背景先谈下背景，在做一款产品的时候需要用到日期选择器，但是官方的却不太满足需求，因为无法选择农历啊。所以自己来造一个轮子好了，造轮子之前先想想啊，万一以后多个地方要用到，多个项目要用，怎么办呢...

lijinke666 2019-08-21 12:02 评论0 收藏0
微信小程序教学第三章第三节（含视频）：小程序中级实战教程：视图与数据关联

摘要：因为循环中当前项的下标变量名默认为，当前项的变量名默认为。包含文章视频源代码原创新书移动前端高效开发实战已在亚马逊京东当当开售。最新活动报名地址与天天练口语小程序总榜排名第四教育类排名第一的研发团队，面对面沟通交流。 § 视图与数据关联本文配套视频地址：https://v.qq.com/x/page/z0554... 开始前请把 ch3-3 分支中的 code/ 目录导入微信开发工...

haitiancoder 2019-08-30 13:49 评论0 收藏0
微信小程序教学第三章第三节（含视频）：小程序中级实战教程：视图与数据关联

摘要：因为循环中当前项的下标变量名默认为，当前项的变量名默认为。包含文章视频源代码原创新书移动前端高效开发实战已在亚马逊京东当当开售。最新活动报名地址与天天练口语小程序总榜排名第四教育类排名第一的研发团队，面对面沟通交流。 § 视图与数据关联本文配套视频地址：https://v.qq.com/x/page/z0554... 开始前请把 ch3-3 分支中的 code/ 目录导入微信开发工...

scola666 2019-08-21 17:16 评论0 收藏0