微信小程序之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 相关文章推荐
iis6+javascript Add an Extension File
Jun 13 Javascript
让JavaScript 轻松支持函数重载 (Part 1 - 设计)
Aug 04 Javascript
javascript事件问题
Sep 05 Javascript
javascript 45种缓动效果 非常酷
Jun 28 Javascript
jquery 插件学习(二)
Aug 06 Javascript
js调出上下文菜单的实例
Dec 17 Javascript
javascript类型系统——undefined和null全面了解
Jul 13 Javascript
JS中input表单隐藏域及其使用方法
Feb 13 Javascript
原生js封装的ajax方法示例
Aug 02 Javascript
在Vant的基础上实现添加表单验证框架的方法示例
Dec 05 Javascript
ZK中使用JS读取客户端txt文件内容问题
Nov 07 Javascript
vue+node 实现视频在线播放的实例代码
Oct 19 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
PHP产生随机字符串函数
2006/12/06 PHP
php SQL防注入代码集合
2008/04/25 PHP
第七章 php自定义函数实现代码
2011/12/30 PHP
php遍历数组的方法分享
2012/03/22 PHP
神盾加密解密教程(一)PHP变量可用字符
2014/05/28 PHP
php获取网页中图片、DIV内容的简单方法
2014/06/19 PHP
常见php数据文件缓存类汇总
2014/12/05 PHP
ThinkPHP5&5.1框架关联模型分页操作示例
2019/08/03 PHP
说说掌握JavaScript语言的思想前提想学习js的朋友可以看看
2009/04/01 Javascript
js cookies实现简单统计访问次数
2009/11/24 Javascript
IE6 fixed的完美解决方案
2011/03/31 Javascript
jquery判断RadioButtonList和RadioButton中是否有选中项示例
2013/09/29 Javascript
详解JavaScript的AngularJS框架中的作用域与数据绑定
2016/03/04 Javascript
html5+javascript实现简单上传的注意细节
2016/04/18 Javascript
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
2016/06/24 Javascript
Bootstrap源码学习笔记之bootstrap进度条
2016/12/24 Javascript
vue的mixins属性详解
2018/03/14 Javascript
JavaScript树的深度优先遍历和广度优先遍历算法示例
2018/07/30 Javascript
js中offset,client , scroll 三大元素知识点总结
2019/09/11 Javascript
利用JavaScript模拟京东按键输入功能
2020/12/01 Javascript
[49:42]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第一局
2016/03/04 DOTA
Python的GUI框架PySide的安装配置教程
2016/02/16 Python
Python使用 Beanstalkd 做异步任务处理的方法
2018/04/24 Python
pytorch + visdom 处理简单分类问题的示例
2018/06/04 Python
python实现批量视频分帧、保存视频帧
2019/05/31 Python
PyCharm刷新项目(文件)目录的实现
2020/02/14 Python
浅谈ROC曲线的最佳阈值如何选取
2020/02/28 Python
Python 实现敏感目录扫描的示例代码
2020/05/21 Python
对CSS3选择器的研究(详解)
2016/09/16 HTML / CSS
利用CSS3实现动态的二级三级菜单效果实例源码
2017/01/04 HTML / CSS
加拿大花店:1800Flowers.ca
2016/11/16 全球购物
美国探亲签证邀请信
2014/02/05 职场文书
根叔历年演讲稿
2014/05/20 职场文书
创文明城市标语
2014/06/16 职场文书
2014流动人口计划生育工作总结
2014/12/20 职场文书
给朋友的道歉短信
2015/05/12 职场文书