微信小程序之Material Design——input组件

最新推荐文章于 2024-05-25 11:10:56 发布
最新推荐文章于 2024-05-25 11:10:56 发布
阅读量1.3k 收藏
点赞数
分类专栏： 微信小程序 文章标签： 微信小程序 MD设计 input组件 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jeffer0323/article/details/54691480
版权

We-MaterialDesign

微信小程序之MaterialDesign– input组件

主要通过input输入事件配合css的transform动态改变实现这种效果。
实际调试过程中，input组件bindinput事件触发后回调的detail对象，
在模拟器中含有cursor属性，在真机中（测过安卓，ios没测过）却没有该属性，最后选择detail对象中的value属性的值的长度来同步输入的位数。
bindfocus事件最好不要添加改变css的代码 。

源码地址https://github.com/jeffer0323/We-MaterialDesign

Markdown Markdown

Markdown

jeffer0323
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原创：微信小程序之MaterialDesign--input组件
AAASai_的博客
01-24 1365
作者：jeffer 来自：原文地址 主要通过input输入事件配合css的transform动态改变实现这种效果。实际调试过程中，input组件bindinput事件触发后回调的detail对象，在模拟器中含有cursor属性，在真机中（测过安卓，ios没测过）却没有该属性，最后选择detail对象中的value属性的值的长度来同步输入的位数。bindfocus事件最好不要添加改变css的代码
微信小程序-微信小程序之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:{
微信小程序之MaterialDesign（三）-- SnackBar
Jeffer's blog
02-04 1818
snackbar： 主要用于提醒用户或者轻量级交互，实现原理： 在需要使用snackbar的页面底部添加一个view，对view进行fixed定位且设置z-index为1000，动态show和hide即可 使用：1. 复制utils下snackbar文件夹到自己的项目指定目录下 2. 在需要使用snackbar的页面的.wxml文件中导入snackbar模板 3. 在app.wxss全局样式中导入
做一个 Material Design 风格的输入框
最新发布
gaotlantis的博客
05-25 419
姓名</div></label>
Material 组件 input
陈开心的博客
10-03 4760
input指令：mdInput在<md-input-container>内部，有前缀后缀mdInput指令必须在<md-input-container>组件内部使用，这么设计的主要原因是它有一些小动画，还有一些错误信息和提示信息的布局，所以要放在<md-input-container>组件内部<md-error>：只有验证不通过时才出现，对两种类型表单都是如此。 <md-hint>：当error显
wxapp-material-ui:基于material-ui做的小程序ui
04-28
wxapp-material-ui 基于material-ui的小程序UI
微信小程序之MaterialDesign–input组件详解
01-03
实际调试过程中，input组件bindinput事件触发后回调的detail对象，在模拟器中含有cursor属性，在真机中（测过安卓，ios没测过）却没有该属性，最后选择detail对象中的value属性的值的长度来同步输入的位数。...
微信小程序之MaterialDesign--input组件详解
08-31
本文将重点解析如何在微信小程序中应用 Material Design 风格，特别是针对 `input` 组件的使用和交互效果。 `input` 组件是小程序中用于接收用户输入的控件，它在 Material Design 中通常会伴随着动态效果，如输入...
微信小程序之MaterialDesign--input组件
03-29
实际调试过程中，input组件bindinput事件触发后回调的detail对象，在模拟器中含有cursor属性，在真机中（测过安卓，ios没测过）却没有该属性，最后选择detail对象中的value属性的值的长度来同步输入的位数。...
微信小程序之MaterialDesign
01-27
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 ...
微信小程序 MaterialDesign(1)---- button(涟漪)
xbup的博客
07-26 2669
本文用来介绍关于如何在微信小程序中实现materia风格的ui化 注意：该ui使用微信小程序原生语法，动画均使用animate以及过渡效果实现，未使用微信的api创建动画 1.准备 创建一个自定义组件 sc-button 在sc-button.json中指明这是一个自定义组件 { &amp;quot;component&amp;quot;:true } 2. 封装button 2.1 初始html格式...
MDUI是一个基于MaterialDesign的前端框架
08-08
MDUI 是一个基于 Material Design 的前端框架
微信小程序之MaterialDesign（二）--view的ripple、reveal效果
Jeffer's blog
01-24 1350
ripple： 水涟漪效果 reveal： 揭露效果 ripple： 主要是两个view的叠加，设置最上层view的border-radius为100%，背景设置半透明。最下层view设置点击事件，并记录点击时的绝对坐标与相对坐标，坐标运算之后，同时动态改变最上层view的top与left，即可实现手指点击哪里，最上层view就会出现在那里。 最后实现涟漪，通过对上层view进行放大动
使用纯 CSS 实现仿 Material Design 的 input 过渡效果
weixin_33806509的博客
04-26 296
以前一段时间，基于对 next 与 graphql 的调研，再加上本人的兴趣，我做了一个站点，也作为我以后各种技术折腾，实践以及兴趣交汇的试验田。 最近我需要在我的实验田使用 jwt 实践校验码的功能。校验码，就是指注册时邮箱或者短信的校验码。需要校验码则需要有登录注册，而在登录注册时，为了多写一些 CSS，我决定实现一个 Material Design 的表单过渡效果。 实现效果见 诗词弦歌 -...
Material Design Lite组件之小纸片
骑着代码去流浪
05-30 533
1.介绍Material Design Lite（MDL）小纸片是一个小型的互动元件。 小纸片通常用于联系人，文本，规则，图标和照片。2.配置选项类名效果其他mdl-chip定义一个元素为MDL小纸片组件必需mdl-chip--contact在小纸片内设置衔接可选mdl-chip__text定义小纸片文本内容内部文本容器必需mdl-chip__action定义小纸片行为内部行为容器必需mdl-ch...
Material Design之TextInputLayout
湖言的博客
06-25 109
代码奉上 implementation 'com.android.support:appcompat-v7:28.0.0' implementation 'com.android.support:support-v4:28.0.0' implementation 'com.android.support:design:28.0.0' 注意：版本号一定要一直，不然你懂得...相当蛋疼 &l...
只言片语——angular material input输入框可以辅助下拉选择
swmlee的博客
12-11 1610
在 angular 使用 material 开发时，如果需要一个输入框，既可以自行输入值，还可以点击下拉选择预设的选项输入值，可以使用 autocomplete 标签。 需要引入 MatAutocompleteModule 模块 import {MatAutocompleteModule} from '@angular/material/autocomplete'; 在 xxx.ts 中定义了下...
css选择器的输入伪类 - 实现Material Design风格的输入框样式体验
一个小白的成长历程
01-21 704
css选择器的输入伪类，实现各自输入状态的匹配 - 实现Material Design风格的输入框样式体验
react微信小程序ui库_如何在React Web应用程序中使用Material-UI显示应用程序内消息...
cumian8165的博客
07-23 569
react微信小程序ui库by Kelly Burke 凯莉·伯克(Kelly Burke) 如何在React Web应用程序中使用Material-UI显示应用程序内消息 (How to show in-app messages using Material-UI in a React web app) In some situations, your web app needs to sh...
微信小程序之图表系列&mdash;&mdash;canvas绘制饼状图
04-19
很高兴回答你关于微信小程序中绘制饼状图的问题。在canvas中绘制饼状图，可以使用arc方法绘制圆弧，并根据数据占比计算出角度进行绘制。具体的绘制步骤可以参考微信小程序官方文档，也可以参考一些开源项目的实现方法。希望这能够帮到你。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值