微信小程序之MaterialDesign--input组件详解


Posted in Javascript onFebruary 15, 2017

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

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

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

预览图片:

微信小程序之MaterialDesign--input组件详解

微信小程序之MaterialDesign--input组件详解

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

源码地址:We-MaterialDesign_3water.rar

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
showModelessDialog()使用详解
Sep 21 Javascript
jQuery学习笔记之jQuery选择器的使用
Dec 22 Javascript
jquery 页面滚动到指定DIV实现代码
Sep 25 Javascript
鼠标移入移出事件改变图片的分辨率的两种方法
Dec 17 Javascript
jQuery中attr()方法用法实例
Jan 05 Javascript
js完美实现@提到好友特效(兼容各大浏览器)
Mar 16 Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
Jan 23 Javascript
EXT中单击button按钮grid添加一行(光标位置可设置)的实例代码
Jun 02 Javascript
JavaScript和jQuery获取input框的绝对位置实现方法
Oct 13 Javascript
原生JS实现简单放大镜效果
Feb 08 Javascript
详解vue-cli项目中怎么使用mock数据
May 29 Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
Sep 27 Javascript
Bootstrap table简单使用总结
Feb 15 #Javascript
原生js轮播(仿慕课网)
Feb 15 #Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
Feb 15 #Javascript
Canvas实现放射线动画效果
Feb 15 #Javascript
微信小程序 开发经验整理
Feb 15 #Javascript
bootstrap table操作技巧分享
Feb 15 #Javascript
利用n 升级工具升级Node.js版本及在mac环境下的坑
Feb 15 #Javascript
You might like
ASP知识讲座四
2006/10/09 PHP
PHP显示今天、今月、上月、今年的起点/终点时间戳的代码
2011/05/25 PHP
解析crontab php自动运行的方法
2013/06/24 PHP
ThinkPHP采用GET方式获取中文参数查询无结果的解决方法
2014/06/26 PHP
调试PHP程序的多种方法介绍
2014/11/06 PHP
php实现随机显示图片方法汇总
2015/05/21 PHP
Extjs学习笔记之九 数据模型(上)
2010/01/11 Javascript
javascript XMLHttpRequest对象全面剖析
2010/04/24 Javascript
面向对象的Javascript之一(初识Javascript)
2012/01/20 Javascript
jquery插件制作 图片走廊 gallery
2012/08/17 Javascript
jquery制作弹窗提示窗口代码分享
2014/03/02 Javascript
nodejs分页类代码分享
2014/06/17 NodeJs
JQuery中ajax方法访问web服务实例
2015/07/18 Javascript
实例详解jQuery结合GridView控件的使用方法
2016/01/04 Javascript
基于RequireJS和JQuery的模块化编程——常见问题全面解析
2016/04/14 Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
2016/12/29 Javascript
JS中Select下拉列表类(支持输入模糊查询)功能
2017/01/17 Javascript
js常用DOM方法详解
2017/02/04 Javascript
vuex页面刷新后数据丢失的方法
2019/01/17 Javascript
vue改变循环遍历后的数据实例
2019/11/07 Javascript
Python的Django框架中的select_related函数对QuerySet 查询的优化
2015/04/01 Python
python3.6.3+opencv3.3.0实现动态人脸捕获
2018/05/25 Python
pycharm 取消默认的右击运行unittest的方法
2018/11/29 Python
Python编程中flask的简介与简单使用
2018/12/28 Python
tensor和numpy的互相转换的实现示例
2019/08/02 Python
python中使用paramiko模块并实现远程连接服务器执行上传下载功能
2020/02/29 Python
python实现读取类别频数数据画水平条形图案例
2020/04/24 Python
Numpy数组的广播机制的实现
2020/11/03 Python
MoviePy常用剪辑类及Python视频剪辑自动化
2020/12/18 Python
HTML5之SVG 2D入门5—颜色的表示及定义方式
2013/01/30 HTML / CSS
校园联欢晚会主持词
2014/03/17 职场文书
体育教师求职信
2014/05/24 职场文书
企业安全生产标语
2014/06/06 职场文书
教师个人成长总结
2015/02/11 职场文书
电影雷锋观后感
2015/06/10 职场文书
python基于tkinter制作m3u8视频下载工具
2021/04/24 Python