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

最新推荐文章于 2023-07-08 21:02:36 发布
原创 最新推荐文章于 2023-07-08 21:02:36 发布 · 1.4k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#微信 #Java #Java-Scrip #HTML5

本文由作者jeffer分享，主要介绍了如何在微信小程序中实现MaterialDesign风格的input组件。通过input的bindinput事件结合CSS的transform动态改变效果。在实际操作中，注意到在模拟器与真机（测试了安卓设备）中detail对象的差异，利用value属性的长度同步输入位数。同时建议避免在bindfocus事件中修改CSS。

作者：jeffer
来自：原文地址

主要通过input输入事件配合css的transform动态改变实现这种效果。

实际调试过程中，input组件bindinput事件触发后回调的detail对象，在模拟器中含有cursor属性，在真机中（测过安卓，ios没测过）却没有该属性，最后选择detail对象中的value属性的值的长度来同步输入的位数。

bindfocus事件最好不要添加改变css的代码 。

预览图片：

JS :

//index.js
//获取应用实例
var a
最低0.47元/天 解锁文章
微信小程序 MaterialDesign(1)---- button(涟漪)
xbup的博客
07-26 2832
本文用来介绍关于如何在微信小程序中实现materia风格的ui化 注意：该ui使用微信小程序原生语法，动画均使用animate以及过渡效果实现，未使用微信的api创建动画 1.准备 创建一个自定义组件 sc-button 在sc-button.json中指明这是一个自定义组件 { "component":true } 2. 封装button 2.1 初始html格式...
微信小程序开发初学：输入框 - input(1)
最新发布
2401_84010107的博客
04-16 1467
设置键盘右下角按钮的文字，仅在 type=“text” 时生效。最大输入长度，设置为 -1 的时候不限制最大长度。默认值：input-placeholder。confirm-type属性的合法值。placeholder的 样式类。类型：boolean。类型：boolean。指定光标与键盘的距离。
微信小程序-微信小程序之MaterialDesign
08-06
We-MaterialDesign 1、微信小程序之MaterialDesign-- input组件（已封装成模板） 效果 1.Simple Float Label   2.Simple Max Charactors 3.Range of Charactors And Error Information 4.Keep the tip of input 5.Input Tips And Error Information 6.Get the value 使用： 1. 复制library下mdinput文件夹到自己的项目指定目录下 2. 在需要使用mdinput的页面的.wxml文件中导入mdinput模板，并在页面的js文件中引入mdinput.js 3. 在app.wxss全局样式中导入的mdinput样式  在当前页面的page.data中配置mdinput组件样式以及初始数据，数据是以数组的形式存在，有多少个mdinput模板，数组的长度即是该值。  如： data:{ inputs:[ { mdInput:{
微信小程序--组件input输入框控件的使用示例源码
03-03
微信小程序定制过程中用到的Input输入框控件。 输入框在程序开发中是经常用到的，比较常见的地方，如：登录、注册、搜索等。 另外输入框在不同的场景下，也会有不同的样式。 这里给大家示范一下各种场景下的实例效果和代码。以便需要的时候直接采用。
微信小程序之Material Design——input组件
Jeffer's blog
01-23 1375
We-MaterialDesign微信小程序之MaterialDesign– input组件主要通过input输入事件配合css的transform动态改变实现这种效果。 实际调试过程中，input组件bindinput事件触发后回调的detail对象，在模拟器中含有cursor属性，在真机中（测过安卓，ios没测过）却没有该属性，最后选择detail对象中的value属性的值的长度来同步输入的位数
微信小程序之MaterialDesign（三）-- SnackBar
Jeffer's blog
02-04 1906
snackbar： 主要用于提醒用户或者轻量级交互，实现原理： 在需要使用snackbar的页面底部添加一个view，对view进行fixed定位且设置z-index为1000，动态show和hide即可 使用：1. 复制utils下snackbar文件夹到自己的项目指定目录下 2. 在需要使用snackbar的页面的.wxml文件中导入snackbar模板 3. 在app.wxss全局样式中导入
微信小程序之MaterialDesign--input组件详解
08-31
本文将重点解析如何在微信小程序中应用 Material Design 风格，特别是针对 `input` 组件的使用和交互效果。 `input` 组件是小程序中用于接收用户输入的控件，它在 Material Design 中通常会伴随着动态效果，如输入...
微信小程序之MaterialDesign--input组件
03-29
实际调试过程中，input组件bindinput事件触发后回调的detail对象，在模拟器中含有cursor属性，在真机中（测过安卓，ios没测过）却没有该属性，最后选择detail对象中的value属性的值的长度来同步输入的位数。...
微信小程序之MaterialDesign–input组件详解
01-03
实际调试过程中，input组件bindinput事件触发后回调的detail对象，在模拟器中含有cursor属性，在真机中（测过安卓，ios没测过）却没有该属性，最后选择detail对象中的value属性的值的长度来同步输入的位数。...
微信小程序 给input 添加选中样式
ZZHK666的博客
08-01 3208
微信小程序 给input 添加选中样式
微信小程序之MaterialDesign
01-27
We-MaterialDesign 1、微信小程序之MaterialDesign-- input组件（已封装成模板） 效果 1.Simple Float Label   2.Simple Max Charactors 3.Range of Charactors And Error Information 4.Keep the tip of input 5.Input Tips And Error Information 6.Get the value 使用： 1. 复制library下mdinput文件夹到自己的项目指定目录下 2. 在需要使用mdinput的页面的.wxml文件中导入mdinput模板，并在页面的js文件中引入mdinput.js 3. 在app.wxss全局样式中导入的mdinput样式  在当前页面的page.data中配置mdinput组件样式以及初始数据，数据
微信小程序之MaterialDesign（二）--view的ripple、reveal效果
Jeffer's blog
01-24 1472
ripple： 水涟漪效果 reveal： 揭露效果 ripple： 主要是两个view的叠加，设置最上层view的border-radius为100%，背景设置半透明。最下层view设置点击事件，并记录点击时的绝对坐标与相对坐标，坐标运算之后，同时动态改变最上层view的top与left，即可实现手指点击哪里，最上层view就会出现在那里。 最后实现涟漪，通过对上层view进行放大动
微信小程序——输入框input
weixin_58963766的博客
07-08 7025
编写时为方便，写的一般是changeContent（），但这是缩写了，全部应该写changeContent：function（），也就是如图所示的方式。从展开的可以发现，（）是人家function的，所以自定义的事件的名称为changeContent。当输入框的内容发生变化时，通过事件对象 e 的 detail.value 属性可以获取到最新的输入框内容。可以结合下图，通过按路径查找的方式理解这句代码：通过不断修改输入文本框的内容发现，detail中包含的value的值在随着文本框内容变化而变化。
微信小程序input使用
小牧在一直在学习,在前进的道路上大家一起学习，进步。
04-19 1万+
这个input 自己也是花费了2个多小时,熟悉,下面将一一讲解经常使用的里面的属性 value 这个value 就是input中的内容, 如果我们想获取input中输入的内容,value是必须使用的 使用可以在input中 定义 value='{{phone}}' 然后在data中初始化就行了,如果写死的input里面就是死的数据 type type 就 很简单了设置输入的...
微信小程序实现自定义input输入框
苏苏就是小苏苏的博客
11-15 1万+
1.实现效果 2.实现原理 1.微信小程序的input不支持letter-spacing的属性 2.将input的宽度设置成250%（注意，父元素需要设置overflow：hidden，否则在苹果手机上将出现滑动），并设置absolute定位将input输入框定位出当前页面。 3.将input输入的值用absolute定位到4个框框里面，设置letter-spacing将文字隔开。 3.实现代码 /* pages/subPack/customIpt/index.wxss */ .dialog_pop03
微信小程序开发初学：输入框 - input
Dae_Lzh的博客
01-27 1万+
输入框。 input具有的属性 value 类型：String 默认值：无 输入框内的初始内容 type 类型：String 默认值：text 输入内容的类型 type属性的合法值 （1）text：输入文本 （2）number：输入数字（弹出数字键盘） （3）idcard：输入身份证（弹出身份证输入键盘） password 类型：boolean 默认值：false 是否为密码类型（输入内容显示为圆点） placeholder 类型：String 默认值：无 提示词 placeholder-class 类型：
微信小程序: input输入框placeholder样式的修改
热门推荐
酷伊奥
07-19 1万+
相信大伙在开发微信小程序的时候都会遇到这种问题。因为客户的需求，所以我们需要对input框中的placeholder的样式进行修改。接下来告诉大家怎么修改，该方法仅适用于微信小程序。 一、我们要给placeholder定义一个样式的名称，，这里我们需要用到placeholder-class这个属性 <view> <input type="text" placeholder="好唔开心啊" placeholder-class="placeholder-style" /> &.
Material Design Lite组件之小纸片
骑着代码去流浪
05-30 631
1.介绍Material Design Lite（MDL）小纸片是一个小型的互动元件。 小纸片通常用于联系人，文本，规则，图标和照片。2.配置选项类名效果其他mdl-chip定义一个元素为MDL小纸片组件必需mdl-chip--contact在小纸片内设置衔接可选mdl-chip__text定义小纸片文本内容内部文本容器必需mdl-chip__action定义小纸片行为内部行为容器必需mdl-ch...
评论 30
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值