文档章节

原创:微信小程序之MaterialDesign--input组件

扶桑木下
 扶桑木下
发布于 2017/01/24 15:50
字数 399
阅读 461
收藏 11

主要通过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

© 著作权归作者所有

扶桑木下
粉丝 22
博文 21
码字总数 16778
作品 0
武汉
程序员
私信 提问
支付宝小程序弹窗插件开发|仿微信/android/ios弹窗效果

支付宝小程序自定义弹窗组件|阿里小程序弹窗插件|提示框alert、确认框confirm、toast弱提示 支付宝小程序弹窗交互组件和微信小程序弹窗功能都差不多,对功能有比较多的限制,尤其想要实现丰富...

andy2018
2018/12/03
0
0
wx-jq:一套完全原创的微信小程序插件集合库

wx-jq (一套完全原创的微信小程序插件集合库) 微信小程序插件,微信小程序组件,微信小程序插件集合,微信小程序组件集合,微信小程序插件学习,微信小程序插件开发, 在线演示: 下载地址...

透笔度
2018/01/25
5K
4
业内首个 React Native转微信小程序引擎 Alita 正式发布

作者:京东ARES多端技术团队 前言 Alita是一套由京东ARES多端技术团队打造的React Native代码转换引擎工具。它对React语法有全新的处理方式,支持在运行时处理React语法,实现了React Nativ...

刘小夕
05/31
0
0
透笔度/wx-jq

wx-jq (一套完全原创的微信小程序插件集合库) 微信小程序插件,微信小程序组件,微信小程序插件集合,微信小程序组件集合,微信小程序插件学习,微信小程序插件开发, 查看效果截图: http...

透笔度
2018/01/26
0
0
前端资源系列(3)-微信小程序开发资源汇总

微信(小程序or应用号)开发资源汇总-文档-工具-教程-代码-插件-组件 文档 从搭建一个微信小程序开始 小程序开发文档 小程序设计指南 工具 小程序开发者工具 - 官方 Egret Wing 3.2.x 支持微信...

xzavier
2018/08/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OpenStack 简介和几种安装方式总结

OpenStack :是一个由NASA和Rackspace合作研发并发起的,以Apache许可证授权的自由软件和开放源代码项目。项目目标是提供实施简单、可大规模扩展、丰富、标准统一的云计算管理平台。OpenSta...

小海bug
昨天
6
0
DDD(五)

1、引言 之前学习了解了DDD中实体这一概念,那么接下来需要了解的就是值对象、唯一标识。值对象,值就是数字1、2、3,字符串“1”,“2”,“3”,值时对象的特征,对象是一个事物的具体描述...

MrYuZixian
昨天
6
0
数据库中间件MyCat

什么是MyCat? 查看官网的介绍是这样说的 一个彻底开源的,面向企业应用开发的大数据库集群 支持事务、ACID、可以替代MySQL的加强版数据库 一个可以视为MySQL集群的企业级数据库,用来替代昂贵...

沉浮_
昨天
6
0
解决Mac下VSCode打开zsh乱码

1.乱码问题 iTerm2终端使用Zsh,并且配置Zsh主题,该主题主题需要安装字体来支持箭头效果,在iTerm2中设置这个字体,但是VSCode里这个箭头还是显示乱码。 iTerm2展示如下: VSCode展示如下: 2...

HelloDeveloper
昨天
7
0
常用物流快递单号查询接口种类及对接方法

目前快递查询接口有两种方式可以对接,一是和顺丰、圆通、中通、天天、韵达、德邦这些快递公司一一对接接口,二是和快递鸟这样第三方集成接口一次性对接多家常用快递。第一种耗费时间长,但是...

程序的小猿
昨天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部