input 事件_14. 教你零基础搭建小程序:小程序事件绑定(1)
图文版
本章以及下一章学习小程序的事件绑定,我们通过一个案例来讲解其中相关的知识点,便于大家理解哦~~
首先,先来看这个案例的需求。
我们使用画图工具,先在上面绘制一个小程序页面,
如下图:
再在页面的最上方放一个输入框,如下图:
我们要实现的第一个需求是:
当我在输入框中输入文字,比如123,
会如实地映射至下面的标签文件中,显示123;
如果上方的输入框文字改变,对应下方的标签文件也发生相应的改变。
如下图所示,
页面右侧是一个“+”号按钮,点击按钮,实现对标签文件数字123+1;
页面右侧下方是一个“-”按钮,点击按钮,实现对标签文件数字123-1。
这就是我们要实现的第二个需求。
明确需求后,接下来我们就写代码来实现这两个需求。
由于篇幅较长,会分为两篇文章来讲解,这章先讲第一个需求。
1、新增一个页面demo04
打开app.json文件,新增文件demo04,保存。
2、demo04.js文件中,只保留data部分,删除其他原有数据,
并添加“num:0”,如下图:
3、demo04.wxml文件,删除其中的原有内容,加入input标签。
代码如下:
<inputtype="text"/>
这里要注意的一点是,
上述代码中,input标签中“/”是不能遗漏的,否则会报错!
保存后,发现右侧的小程序页面并没有发生变化,那它在哪呢?
这时,我们只需要将鼠标移至页面顶端,
点击,输入1234,数字就可在页面中显示。
操作如下图。
4、demo04.wxml文件中,添加view标签,代码如下:
<view>
{{num}}
</view>
保存,右侧页面显示0。
我们要实现第一个需求,
即在小程序页面的输入框中输入123,在下面(0这一行)也显示相同的文本123。
这就需要我们将input标签绑定input事件,
而且这个事件是只有在输入框的值发生变化的时候才会触发。
所以,这里,我们要用的绑定关键字为bindinput
5、绑定一个input事件。
将input标签修改如下:
<inputtype="text"/handleinput="">
""内是要加入一个函数,也就是handleinput后要绑定一个函数。
6、在demo04.js文件中,写入handleinput要绑定的这个函数,与data同层。
代码如下:
Page({
data:{
num:0
},
//输入框的input事件的执行逻辑
handleinput(e){
console.log("");
}
})
7、将上述代码中的handleinput函数粘贴至input标签,此时就完成了对input事件的绑定。
<inputtype="text"bindinput="“handleinput"/>
<view>
{{num}}
</view>
8、点击小程序页面,在输入框内输入1,观察控制台的变化。
如下图,控制台出现”:
此时,我们在输入框中输入2,控制台显示3。
这表示事件已经绑定成功。
成功绑定事件后,那接下来如何获取输入框的值,
并将其放至demo04.js文件中的data部分中呢?
这就需要通过事件源对象来获取对象“e”
9、修改demo04.js文件中console.log的内容,将这样:
修改成这样:
10、保存后,回到小程序页面,在输入框中输入1,
可观察到下图控制台console-detail部分,value=1,
所以这里的源对象就为e.detail.value
11、将源对象e.detail.value复制至demo04.js文件—
修改data部分-console.log(e.detail.value),
具体如下:
12、在小程序页面的输入框中输入1234,会发现控制台也会出现对应的数字1234,如下图:
13、最后一步,我们需要将源对象e.detail.value与num值产生联系。
方法是,将输入框中的值直接赋值至data中,在demo04.js中,修改代码如下:
Page({
data:{
num:0
},
//输入框的input事件的执行逻辑
handleinput(e){
//console.log(e.detail.value);
this.setData({
num:e.detail.value
})
}
})
保存后,在小程序页面的输入框输入123456下面的一行也会随之改变。
输入框的值也可在控制台—AppData——num中看到更新:
经过以上13个步骤,我们成功实现了开始时说的第一个需求:
当我在输入框中输入文字,比如123,
会如实地映射至下面的标签文件中,显示123;
如果上方的输入框文字改变,对应下方的标签文件也发生相应的改变。
第二个需求的具体操作,请关注我们下一章的讲解~~~
视频版
知乎视频www.zhihu.com
input 事件_14. 教你零基础搭建小程序:小程序事件绑定(1)相关推荐
- 局部配置和全局配置_06. 教你零基础搭建小程序(解读全局配置文件-tabBar字段)...
自从开始在知乎上发教程后,发现一个事情啊, 大家对于我写的教程,都在偷偷地收藏~~ 但是, 却没有银点赞~ 知乎这个平台吧,点赞的分量比收藏更大, 这里也不是要赞(我知道自己还能做的更好), 只是希望 ...
- axure8 事件改变样式_15. 教你零基础搭建小程序:小程序事件绑定(2)
图文版 本章继续讲解小程序的事件绑定的相关知识,上一章我们实现了第一个需求, 当在输入框中输入文字,比如123, 会如实地映射至下面的标签文件中,显示123: 如果上方的输入框文字改变,对应下方的标签 ...
- 小程序如何用data的数据控制页面展示_17. 教你零基础搭建小程序:小程序事件绑定(1)
本章以及下一章学习小程序的事件绑定,我们通过一个案例来讲解其中相关的知识点,便于大家理解哦~~ 首先,先来看这个案例的需求. 我们使用画图工具,先在上面绘制一个小程序页面,如下图: 再在页面的最上方放 ...
- 小程序input wxss_19. 教你零基础搭建小程序:wxss-尺寸单位
这章以后的四章都是介绍小程序样式文件--wxss 的使用,分为以下三个部分 一.尺寸方案 二.样式导入 三.选择器 这章先来讲wxss的尺寸单位-- rpx wxss的定义: WXSS( WeiXin ...
- 点击button后改变文字_27. 教你零基础搭建小程序:小程序的常见组件—button
筒子们,这一章接着讲Button 标签. 开放能力的属性 button标签的开放能力是指open-type 属性. 其中,这个属性的合法值包括如下: 这一部分呢,需要分为两个方式来演示. 一是可在模拟 ...
- 微信小程序怎么在wxml中插入多个图片_22. 教你零基础搭建小程序:小程序的常见组件(2)- image
大家好~今天讲小程序的常见组件-- image 图片标签 小程序中的图片标签相当于 web 中的图片标签 ,但也存在着不同之处. 例如:小程序在后期要打包上线时,对图片的大小是有要求的,图片要< ...
- 零基础搭建智能垃圾分类小程序(可做毕设,可加入流量主,赚取零花钱)
1.先上图 2.准备工作 一.申请一个小程序 申请地址:微信公众平台, 申请小程序的操作很简单,大家百度一下跟着步骤申请就行,某宝上还有认证小程序代申请代认证,老铁们可以自行选择. 二.下载微信 ...
- 云开发平台开箱,3分钟零基础搭建个人Hexo博客
简介:Hexo是一款基于Node.js的博客框架,可以将Markdown格式的文本渲染为HTML代码.所以,博客基本就是纯静态,维护相对方便.但是缺点也很明显--经常换编写环境使用不便,因为它的所有渲 ...
- 【Workshshop No.3 | Kyligence X 青云QingCloud Workshop】零基础搭建云上大数据平台
7月13日Kyligence 与青云QingCloud 联合举办的"零基础搭建云上大数据平台" Workshop诚邀您参加. Kyligence Cloud 是 Kyligence ...
最新文章
- MAPREDUCE实践篇(2)
- 第30本:《怎样解题》
- python3报错处理:UnicodeEncodeError: ‘ascii‘ codec can‘t encode characters in position 0-1
- 四十三、Linux磁盘管理和Shell编程
- yuki翻译器钩子_git hooks钩子
- Base64编码的原理与常用实现
- 再次细分防火墙 WebRAY为何定义MAF新品类
- java实现调用百度图像识别API,批量识别车辆车型、颜色等信息
- html+js实现分页功能
- usaco Raucous Rockers
- AQS——CLH队列维护方法详解
- 入手一年,再谈HiFi耳机的“白月光”——飞利浦Fidelio X3
- 传输线方程与终端加载的无损耗传输线
- openwrt配置doh
- python 实现串口发送数据
- sa结构组网方式_中兴解读:SA组网解决方案
- pip命令下载第三方依赖的彩色进度条的具体实现
- Man Is Here For The Sake of Other Men 人是为了别人而活着
- java的抽象方法_java抽象方法是什么
- SpringAop动态代理的两种实现方式