原创:微信小程序之MaterialDesign--input组件
来源:互联网 发布:python编程 中文 pdf 编辑:程序博客网 时间:2024/05/08 15:28
作者: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/We-MaterialDesign
0 0
- 原创:微信小程序之MaterialDesign--input组件
- 微信小程序----组件之input
- 微信小程序之MaterialDesign(三)-- SnackBar
- 微信小程序之Material Design——input组件
- 微信小程序中的input组件
- 原创:WeZRender:微信小程序Canvas增强组件
- 微信小程序把玩(十七)input组件
- MaterialDesign内的组件
- Android MaterialDesign 组件列表
- 微信小程序之MaterialDesign(二)--view的ripple、reveal效果
- MaterialDesign 之 ToolBar学习
- MaterialDesign 之 NavigationView
- android MaterialDesign之CardView
- MaterialDesign之Dialog
- MaterialDesign之RippleDrawable
- MaterialDesign之SVG
- MaterialDesign之学一波Palette
- 微信小程序之组件学习
- java学习-javaAPI(2017/1/24)
- Centos6.5使用yum安装mysql
- Android中的进程间通信(二)
- MFC处理背景图片切换时,背景上的按钮图片不变化
- 批量更改图片名称
- 原创:微信小程序之MaterialDesign--input组件
- 【备忘】2014年传智播客基础班+就业班 ios(第四期)完整视频下载
- C++学习—深拷贝与浅拷贝
- 嵌入式Linux-进程调度
- PC端口
- C语言实验——判断素数(循环结构)(sdut oj)
- RxJS 是个什么鬼?听说很腻害
- 51nod 1420 数袋鼠好有趣(贪心)
- MatlabR2014a+Visual studio 2013 混合编程 dll丢失和初始化失败(已解决)