微信小程序中input标签详解及简单实例
微信小程序中input标签详解及简单实例
使用input标签,我们都会,在微信小程序中使用,必定也是可以一下子就会的,但是却有些常用的属性无法按照习惯去使用:
我就用我最常用的来做例子:
一个一个来解读:
首先,我是定义了他的id,这是我们最常用的,所以就配了一个id,毕竟不操作他,又为什么设成输入框呢, 第二,设置他的样式, 第三,设置他的输入类别,以上都是很简单的 第四。使用正则l;哎限定输入为纯数字。这点可能有点不理解,这是对他的keyup事件监听,将不是纯数字的list无视掉。注意,是对整个,不是经行筛选。 第五,限制他的输入最多6位数 第六输入事件监听。这是微信专属的,他的事件下面会给出 第七,设置当输入框为空的时候他的‘提示语';
bindinput事件:
bind,顾名思义是绑定,绑定input输入
事件如下:
tapevent:function(e){ // 减少的时候 if (e.target.id =="increase"){ this.data.tickets++; this.setData(this.data); } else { this.data.tickets--; this.setData(this.data); } // 在这里修改总额 },
这是节选,所以先不要好奇怎么运行到这一段的,看得出来。tapevent被定义为一个function。并且在这经行操作,感觉微信跟Android差不多。都是靠刷新页面来的。
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
相关推荐
-
微信小程序 input输入框控件详解及实例(多种示例)
微信小程序 input输入框控件 今天主要详写一下微信小程序中的Input输入框控件,输入框在程序中是最常见的,登录,注册,获取搜索框中的内容等等都需要,同时,还需要设置不同样式的输入框,今天的代码中都要相应的使用. 首先主页面中将登录的样式进行了简单展示和使用, 代码如下: <!--index.wxml--> <!--如果在同一个form表单中创建了多个input输入框,可以给给每个输入框,创建自己的 name="userName"属性,可以区别哪个输入框,并通过添
-
微信小程序 (十七)input 组件详细介绍
input输入框使用的频率也是比较高的...样式的话自己外面包裹个view自己定义.input属性也不是很多,有需要自己慢慢测,尝试 主要属性: wxml <!--style的优先级比class高会覆盖和class相同属性--> <view class="inputView" style="margin-top: 40% "> <input class="input" type="number"
-
微信小程序 input输入框详解及简单实例
微信小程序输入框input 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 实现效果图: 微信小程序输入框input 属性名 类型 默认值 说明 value String 输入框的内容 type String text input的类型,
-
微信小程序picker组件下拉框选择input输入框的实例
微信小程序picker组件下拉框选择input输入框的实例 实现效果图: 页面 <view class="row-wrap"> <view class="label">预约项目</view> <picker bindchange="bindCasPickerChange" value="{{casIndex1}}" range="{{casArray}}">
-
微信小程序 input输入及动态设置按钮的实现
微信小程序 input输入及动态设置按钮的实现 [需求]实现当手机号已填写和协议已勾选时,"立即登录"按钮变亮,按钮可点击:若有一个不满足,按钮置灰,不可点击:实现获取短信验证码,倒计时提示操作:对不满足要求内容进行toast弹窗提示. <view class="container"> <!--手机号--> <view class="section"> <text class="txt"
-
微信小程序 input表单与redio及下拉列表的使用实例
微信小程序 input表单与redio及下拉列表的使用实例 一个简单的预约类型的表单,效果 主要代码: <form bindsubmit="bindSave"> <view class="form-box"> <view class="row-wrap"> <view class="label">联系人</view> <view class="labe
-
微信小程序之MaterialDesign--input组件详解
主要通过input输入事件配合css的transform动态改变实现这种效果. 实际调试过程中,input组件bindinput事件触发后回调的detail对象,在模拟器中含有cursor属性,在真机中(测过安卓,ios没测过)却没有该属性,最后选择detail对象中的value属性的值的长度来同步输入的位数. bindfocus事件最好不要添加改变css的代码 . 预览图片: JS: //index.js //获取应用实例 var app = getApp() Page({ data: { v
-
微信小程序中input标签详解及简单实例
微信小程序中input标签详解及简单实例 使用input标签,我们都会,在微信小程序中使用,必定也是可以一下子就会的,但是却有些常用的属性无法按照习惯去使用: 我就用我最常用的来做例子: 一个一个来解读: 首先,我是定义了他的id,这是我们最常用的,所以就配了一个id,毕竟不操作他,又为什么设成输入框呢, 第二,设置他的样式, 第三,设置他的输入类别,以上都是很简单的 第四.使用正则l:哎限定输入为纯数字.这点可能有点不理解,这是对他的keyup事件监听,将不是纯数字的list无视掉.注意,是对
-
微信小程序中的onLoad详解及简单实例
微信小程序中的onLoad onLoad是一个生命周期函数,表示页面加载 onLoad默认有一个Object类型的参数,是指其他页面打开当前页面所调用的 query 参数 举个栗子~ 当我们在页面first的js脚本中有一个点击方法onTap 当点击时页面跳转到second页面,用?id = secondId的形式为second页面传递一个值(这里的secondId是一个已经获取过的值) onTap: function(){ wx.navigateTo({ url: "second?id=&qu
-
微信小程序 高德地图SDK详解及简单实例(源码下载)
微信小程序 高德地图SDK: 简介 微信小程序 SDK 帮您在微信小程序中获取高德丰富的地址描述.POI和实时天气数据. 功能介绍 账号与Key的申请 注册成为高德开发者需要分三步: 第一步,注册高德开发者:第二步,去控制台创建应用:第三步,获取Key. 1注册高德开发者 2创建应用 3获取API key 获取API Key 入门指南 最后更新时间: 2017年1月9日 本指南是使用微信小程序SDK的快速入门指南. 第 1 步:下载并安装微信小程序开发工具 按照微信小程序开发文档下载并安装微信小
-
微信小程序 this和that详解及简单实例
微信小程序中,在wx.request({});方法调用成功或者失败之后,有时候会需要获取页面初始化数据data的情况,这个时候,如果使用,this.data来获取,会出现获取不到的情况,调试页面也会报undefiend.原因是,在javascript中,this代表着当前对象,会随着程序的执行过程中的上下文改变,在wx.request({});方法的回调函数中,对象已经发生改变,所以已经不是wx.request({});方法对象了,data属性也不存在了.官方的解决办法是,复制一份当前的对象,如
-
如何在微信小程序中使用less详解(最优方式)
前言 写惯了 less/sass,但是现在开发小程序缺还是 css,很不习惯. 在网上搜的教程,要么是 gulp,要么就是 vscode 的 Easy-less 的插件. 传统方式 我们来对比,这两种方式的优劣. Gulp 前者要对于 gulp 有简单的了解,但是现在大道其行的 webpack 来说,gulp 用的人也越来越少,而且具有一定的学习成本,但好在自定义程度较高,自己可以随便添加take. VScodd的Esay-less插件 啥都不说,挺香的,直接在 vscode 安装 easy-l
-
微信小程序中button组件的边框设置的实例详解
微信小程序中button组件的边框设置的实例详解 button的边框是用:after方式实现的,用户如果在button上定义边框会出现两条线,需用:after的方式去覆盖默认值. 如果设置了Button的背景色,没有用:after设置边框的颜色,则button的四个角会出现模糊的尖角.如下图所示: 如上图四个角会模糊..wxss代码如下: .clickEncryptBtn{ width:130px; border-radius: 3px; margin:20px auto; padding-to
-
微信小程序 Buffer缓冲区的详解
微信小程序 Buffer缓冲区的详解 JavaScript 语言自身只有字符串数据类型,没有二进制数据类型. 但在处理像TCP流或文件流时,必须使用到二进制数据.因此在 Node.js中,定义了一个 Buffer 类,该类用来创建一个专门存放二进制数据的缓存区. 在 node.js 中,Buffer 类是随 Node 内核一起发布的核心库.Buffer 库为 Node.js 带来了一种存储原始数据的方法,可以让 Node.js 处理二进制数据,每当需要在 Node.js 中处理I/O操作中移动
-
微信小程序 MD5的方法详解及实例代码
微信小程序 MD5的方法详解 生成的文件可以放在 utils文件中哦!!! /* * A JavaScript implementation of the RSA Data Security, Inc. MD5 Message * Digest Algorithm, as defined in RFC 1321. * Version 1.1 Copyright (C) Paul Johnston 1999 - 2002. * Code also contributed by Greg Holt
-
微信小程序实现分页查询详解
目录 创建自定义连接器 云开发介绍 分页实现思路 使用连接器 为什么要自定义分页功能 日常小程序经常需要分页查询的功能,本篇我们讲解一下低代码中如何实现分页查询的功能.要自己开发分页功能,可以先参考官方的方法 分页查询我们一般是需要有入参和出参,入参分别需要页码.每页大小.排序字段名称.排序方式.查询条件. 出参分别需要记录总条数.页码.每页大小.记录列表. 入参和出参知道之后,那在哪写代码呢?像分页这种功能一般属于后端的能力,低码工具中是在自定义连接器里写后端代码的. 创建自定义连接器 登录低
-
微信小程序日历组件calendar详解及实例
微信小程序日历组件calendar详解及实例 模版使用: src="../cal/calendar.wxml"> is="calendar" data="{{selected_value,days,month,years,lunar_years,lunar_month,lunar_days,selectDateType,l unar_selected_value}}"> JS代码使用: var Calendar = require('
随机推荐
- js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
- 正则表达式简单的检查输入email是否合法程序
- java使用Socket实现SMTP协议发送邮件
- 关于页面优化和伪静态
- 据说是雅虎的一份PHP面试题附答案
- Zend Framework入门教程之Zend_Mail用法示例
- jquery的$getjson调用并获取远程的JSON字符串问题
- nodejs中简单实现Javascript Promise机制的实例
- 一段php加密解密的代码
- 最短的IE判断var ie=!-[1,]分析
- SQL SERVER 2008 R2 重建索引的方法
- Java设计模式之工厂方法模式实例简析
- js带点自动图片轮播幻灯片特效代码分享
- JavaScript常用数组算法小结
- 详解Kotlin:forEach也能break和continue
- springboot配置内存数据库H2教程详解
- Java使用字节流复制文件的方法
- 用Flash图形化数据(一)
- 排除路由故障
- java关于调用方法的汇总