微信小程序之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 相关文章推荐
动态加载iframe
Jun 16 Javascript
JS计算网页停留时间代码
Apr 28 Javascript
JavaScript实现从数组中选出和等于固定值的n个数
Sep 03 Javascript
深入理解JavaScript系列(21):S.O.L.I.D五大原则之接口隔离原则ISP详解
Mar 05 Javascript
JavaScript采用递归算法计算阶乘实例
Aug 04 Javascript
基于BootStrap实现局部刷新分页实例代码
Aug 08 Javascript
微信小程序加载更多 点击查看更多
Nov 29 Javascript
javascript中this用法实例详解
Apr 06 Javascript
微信小程序滚动Tab实现左右可滑动切换
Aug 17 Javascript
vue axios数据请求get、post方法及实例详解
Sep 11 Javascript
vue+web端仿微信网页版聊天室功能
Apr 30 Javascript
js实现带积分弹球小游戏
Jul 21 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
基于mysql的bbs设计(二)
2006/10/09 PHP
PHP中获取时间的下一周下个月的方法
2014/03/18 PHP
PHP使用逆波兰式计算工资的方法
2015/07/29 PHP
浅谈php处理后端&接口访问超时的解决方法
2016/10/29 PHP
PHP常见字符串操作函数与用法总结
2019/03/04 PHP
PHP中PCRE正则解析代码详解
2019/04/26 PHP
利用ASP发送和接收XML数据的处理方法与代码
2007/11/13 Javascript
js 数组操作代码集锦
2009/04/28 Javascript
javascript针对DOM的应用分析(四)
2012/04/15 Javascript
js通过地址栏给action传值(中文乱码全是问号)
2013/05/02 Javascript
javascript判断机器是否联网的2种方法
2013/08/09 Javascript
js实现特定位取反原理及示例
2014/06/30 Javascript
javascript强制点击广告的方法
2015/02/06 Javascript
理解Angular数据双向绑定
2016/01/10 Javascript
Angular.js中用ng-repeat-start实现自定义显示
2016/10/18 Javascript
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
2017/01/19 Javascript
React Native 真机断点调试+跨域资源加载出错问题的解决方法
2018/01/18 Javascript
微信小程序实现页面跳转传递参数(实体,对象)
2019/08/12 Javascript
vue-amap根据地址回显地图并mark的操作
2020/11/03 Javascript
[43:32]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS NewBee第一场
2014/05/26 DOTA
Python下载懒人图库JavaScript特效
2015/05/28 Python
深入浅析Python中join 和 split详解(推荐)
2016/06/30 Python
Python图算法实例分析
2016/08/13 Python
快速解决jupyter启动卡死的问题
2020/04/10 Python
python异步Web框架sanic的实现
2020/04/27 Python
浅析NumPy 切片和索引
2020/09/02 Python
美国体育用品商店:Rally House(NCAA、NFL、MLB、NBA、NHL和MLS)
2018/01/03 全球购物
Lookfantastic美国/加拿大:英国知名美妆购物网站
2019/03/27 全球购物
Laravel中Kafka的使用详解
2021/03/24 PHP
特色蛋糕店创业计划书
2014/01/28 职场文书
日语专业个人求职信范文
2014/02/02 职场文书
护士工作失误检讨书
2014/09/14 职场文书
灵山大佛导游词
2015/02/04 职场文书
一文帮你理解PReact10.5.13源码
2021/04/03 Javascript
深入讲解数据库中Decimal类型的使用以及实现方法
2022/02/15 MySQL
MySQL创建表操作命令分享
2022/03/25 MySQL