微信小程序之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 相关文章推荐
jQuery 学习 几种常用方法
Jun 11 Javascript
js左侧多级菜单动态的解决方案
Feb 01 Javascript
jquery的ajax异步请求接收返回json数据实例
Jun 16 Javascript
jQuery实现表单提交时判断的方法
Dec 13 Javascript
提交按钮的name='submit'引起的js失效问题及原因
Feb 25 Javascript
实现音乐播放器的代码(html5+css3+jquery)
Aug 04 Javascript
JSONP原理及简单实现
Jun 08 Javascript
深入学习jQuery中的data()
Dec 22 Javascript
jquery实现tab键进行选择后enter键触发click行为
Mar 29 jQuery
深入理解node.js之path模块
May 03 Javascript
js读取本地文件的实例
Dec 22 Javascript
javascript中的相等操作符(==与===区别)
Dec 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
PHP生成带有雪花背景的验证码
2008/09/28 PHP
php通用防注入程序 推荐
2011/02/26 PHP
PHP扩展CURL的用法详解
2014/06/20 PHP
PHP会话处理的10个函数
2015/08/11 PHP
thinkphp3.x连接mysql数据库的方法(具体操作步骤)
2016/05/19 PHP
浅谈mysql_query()函数的返回值问题
2016/09/05 PHP
PHP实现SMTP邮件的发送实例
2018/09/27 PHP
封装好的省市地区联动控件附下载
2007/08/13 Javascript
使用jQuery实现dropdownlist的联动效果(sharepoint 2007)
2011/03/30 Javascript
jQuery选择器之基本选择器与层次选择器
2015/03/03 Javascript
JavaScript控制图片加载完成后调用回调函数的方法
2015/03/20 Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
2018/03/22 Javascript
利用Node.js批量抓取高清妹子图片实例教程
2018/08/02 Javascript
如何提升vue.js中大型数据的性能
2019/06/21 Javascript
解决layui table表单提示数据接口请求异常的问题
2019/09/24 Javascript
Layui选项卡制作历史浏览记录的方法
2019/09/28 Javascript
vue3.0 项目搭建和使用流程
2021/03/04 Vue.js
[01:03:56]Mineski vs TNC 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
python 字典(dict)遍历的四种方法性能测试报告
2014/06/25 Python
python使用PIL模块实现给图片打水印的方法
2015/05/22 Python
Ubuntu下Python2与Python3的共存问题
2018/10/31 Python
windows下安装Python虚拟环境virtualenvwrapper-win
2019/06/14 Python
详解python实现交叉验证法与留出法
2019/07/11 Python
CentOS7下安装python3.6.8的教程详解
2020/01/03 Python
导致python中import错误的原因是什么
2020/07/01 Python
如何在python中实现线性回归
2020/08/10 Python
Python json解析库jsonpath原理及使用示例
2020/11/25 Python
澳大利亚宠物食品和用品商店:PETstock
2020/01/02 全球购物
美国踏板车和轻便摩托车销售网站:Mega Motor Madness
2020/02/26 全球购物
寻找迷宫的一条出路,o通路;X:障碍
2016/07/10 面试题
介绍一下你对SOA的认识
2016/04/24 面试题
思想纪律作风整顿剖析材料
2014/10/11 职场文书
综合测评个人总结
2015/03/03 职场文书
上诉状格式
2015/05/23 职场文书
刑事上诉状(无罪)
2015/05/23 职场文书
《这片土地是神圣的》教学反思
2016/02/16 职场文书