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

最新推荐文章于 2024-04-16 06:24:26 发布
最新推荐文章于 2024-04-16 06:24:26 发布
阅读量1.3k 收藏
点赞数
分类专栏： 微信小程序 文章标签： 微信 Java Java-Scrip HTML5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AAASai_/article/details/54708412
版权
本文由作者jeffer分享，主要介绍了如何在微信小程序中实现MaterialDesign风格的input组件。通过input的bindinput事件结合CSS的transform动态改变效果。在实际操作中，注意到在模拟器与真机（测试了安卓设备）中detail对象的差异，利用value属性的长度同步输入位数。同时建议避免在bindfocus事件中修改CSS。
摘要由CSDN通过智能技术生成

作者：jeffer
来自：原文地址

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

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

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

预览图片：

JS :

最低0.47元/天 解锁文章
AAASai_
关注
专栏目录
微信小程序 MaterialDesign(1)---- button(涟漪)
xbup的博客
07-26 2696
本文用来介绍关于如何在微信小程序中实现materia风格的ui化 注意：该ui使用微信小程序原生语法，动画均使用animate以及过渡效果实现，未使用微信的api创建动画 1.准备 创建一个自定义组件 sc-button 在sc-button.json中指明这是一个自定义组件 { "component":true } 2. 封装button 2.1 初始html格式...
微信小程序-微信小程序之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:{
微信小程序之Material Design——input组件
Jeffer's blog
01-23 1308
We-MaterialDesign微信小程序之MaterialDesign– input组件主要通过input输入事件配合css的transform动态改变实现这种效果。 实际调试过程中，input组件bindinput事件触发后回调的detail对象，在模拟器中含有cursor属性，在真机中（测过安卓，ios没测过）却没有该属性，最后选择detail对象中的value属性的值的长度来同步输入的位数
微信小程序之MaterialDesign（三）-- SnackBar
Jeffer's blog
02-04 1828
snackbar： 主要用于提醒用户或者轻量级交互，实现原理： 在需要使用snackbar的页面底部添加一个view，对view进行fixed定位且设置z-index为1000，动态show和hide即可 使用：1. 复制utils下snackbar文件夹到自己的项目指定目录下 2. 在需要使用snackbar的页面的.wxml文件中导入snackbar模板 3. 在app.wxss全局样式中导入
微信小程序--组件input输入框控件的使用示例源码
03-03
微信小程序定制过程中用到的Input输入框控件。 输入框在程序开发中是经常用到的，比较常见的地方，如：登录、注册、搜索等。 另外输入框在不同的场景下，也会有不同的样式。 这里给大家示范一下各种场景下的实例效果和代码。以便需要的时候直接采用。
微信小程序之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(1)
最新发布
2401_84010107的博客
04-16 636
设置键盘右下角按钮的文字，仅在 type=“text” 时生效。最大输入长度，设置为 -1 的时候不限制最大长度。默认值：input-placeholder。confirm-type属性的合法值。placeholder的 样式类。类型：boolean。类型：boolean。指定光标与键盘的距离。
微信小程序之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组件样式以及初始数据，数据
antd-visual-editor:ant-design 组件库实时可视化编辑器，实时生成 react 代码
05-24
一个 可视化实时渲染的 ant-design 页面搭建工具 此项目是上古项目，代码基本很难维护，现在发布出来仅供参考思路，感兴趣的可以根据原理重构一版，实现一个更完备的可视化编辑 友情提醒：不建议在团队内投入大量精力做类似的事情（企图一步到位改变开发现状），与行业里用 AI 切页面类似，尽量作为玩具把玩一下即可。 线上实例 托管在 github，第一次加载会比较慢 截图： 运行 npm run build; npm run start; # （已修复）因为我不太懂 webpack ，不太会配置，这个项目修改代码后实时生效还有问题。。求 pr 特性 可视化编辑，同时实时生成结果代码，还可以单独预览 丰富的数据编辑能力，可以编辑组件的二维属性 组件可嵌套 自适应布局 除了 antd 的组件，还有一些原生 html 元素可使用 原理解析 1.如何实现实时编辑 第一步，抽象整个可视化工作台的数据表
微信小程序 给input 添加选中样式
ZZHK666的博客
08-01 3005
微信小程序 给input 添加选中样式
微信小程序之MaterialDesign（二）--view的ripple、reveal效果
Jeffer's blog
01-24 1358
ripple： 水涟漪效果 reveal： 揭露效果 ripple： 主要是两个view的叠加，设置最上层view的border-radius为100%，背景设置半透明。最下层view设置点击事件，并记录点击时的绝对坐标与相对坐标，坐标运算之后，同时动态改变最上层view的top与left，即可实现手指点击哪里，最上层view就会出现在那里。 最后实现涟漪，通过对上层view进行放大动
微信小程序——输入框input
weixin_58963766的博客
07-08 6163
编写时为方便，写的一般是changeContent（），但这是缩写了，全部应该写changeContent：function（），也就是如图所示的方式。从展开的可以发现，（）是人家function的，所以自定义的事件的名称为changeContent。当输入框的内容发生变化时，通过事件对象 e 的 detail.value 属性可以获取到最新的输入框内容。可以结合下图，通过按路径查找的方式理解这句代码：通过不断修改输入文本框的内容发现，detail中包含的value的值在随着文本框内容变化而变化。
微信小程序实现自定义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
Material Design Lite组件之小纸片
骑着代码去流浪
05-30 544
1.介绍Material Design Lite（MDL）小纸片是一个小型的互动元件。 小纸片通常用于联系人，文本，规则，图标和照片。2.配置选项类名效果其他mdl-chip定义一个元素为MDL小纸片组件必需mdl-chip--contact在小纸片内设置衔接可选mdl-chip__text定义小纸片文本内容内部文本容器必需mdl-chip__action定义小纸片行为内部行为容器必需mdl-ch...
使用纯 CSS 实现仿 Material Design 的 input 过渡效果
weixin_33806509的博客
04-26 303
以前一段时间，基于对 next 与 graphql 的调研，再加上本人的兴趣，我做了一个站点，也作为我以后各种技术折腾，实践以及兴趣交汇的试验田。 最近我需要在我的实验田使用 jwt 实践校验码的功能。校验码，就是指注册时邮箱或者短信的校验码。需要校验码则需要有登录注册，而在登录注册时，为了多写一些 CSS，我决定实现一个 Material Design 的表单过渡效果。 实现效果见 诗词弦歌 -...
生成的标题：微信小程序安全测试手册-抓取流量v1.01及三种方法分析
微信小程序安全测试手册-抓取流量v1.01 前言： 在进行安全测试时，我们经常需要测试微信小程序的安全性。由于微信小程序基本都是基于HTTPS协议的，因此抓取HTTPS数据包是非常关键的一步。最近几天，笔者研究了一些...
评论 30
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值