axure8 事件改变样式_15. 教你零基础搭建小程序：小程序事件绑定（2）

图文版

本章继续讲解小程序的事件绑定的相关知识，上一章我们实现了第一个需求，

当在输入框中输入文字，比如123，
会如实地映射至下面的标签文件中，显示123；
如果上方的输入框文字改变，对应下方的标签文件也发生相应的改变。

这一章我们继续实战，来教大家怎样实现第2个需求，

页面右侧是一个“+”号按钮，点击按钮，实现对标签文件数字123＋1；
页面右侧下方是一个“-”按钮，点击按钮，实现对标签文件数字123-1。

具体步骤如下：

1、编写+-按钮的代码。

在demo04.wxml中，再加入一个button标签，代码如下：

<button>+</button>
<button>-</button>

保存后，小程序界面如下：

样子好像有点丑哈哈，不过我们后期会带着大家学习怎么修改样式。

2、bindtap绑定点击事件。

在demo04.wxml中，将bindtap加入button标签中，并通过自定义属性data-operation的方式来传递参数。

代码如下：

<buttonbindtap="handletap"data-operation="{{1}}">+</button>
<buttonbindtap="handletap"data-operation="{{-1}}">-</button>

3、事件源中获取自定义属性。

在demo04.js文件中，data中定义源对象，代码如下：

handletap(e){
console.log(e)
}

保存后，点击小程序页面的“+”，在控制台上查看currentTarget—dataset。

这里显示的operation:1就是我们将“+”按钮和“-”按钮区分的值，这里的值就是“+”。

同样地，我们点击小程序页面的“-”，

控制台—currentTarget—dataset—operation:-1。

4、在上面的代码中，接着编辑，代码如下：

handletap(e){
console.log(e)
constoperation=e.currentTarget.dataset.operation;
this.setData({
num:this.data.num+operation
})
}=

其中，新增部分：

constoperation=e.currentTarget.dataset.operation;
this.setData({num:this.data.num+operation})

意为在获取data值时，需通过this.data.num来获取。

保存后，点击小程序页面的+-，会实现对下方数字的增减。

到这里，经过4个步骤，我们的第二个需求也完成了！

总结：

1、当要给某个标签绑定事件时，要用到关键字bind
2、在获取自定义属性或者输入框的值时，都是要通过事件源对象来获取的。
3、当要获取data中的值时，要用到this.data.num属性
4、当要将值赋值到num中时，需要用到this.setData属性
5、在绑定事件时，不能直接进行传参，一定要用到自定义属性。

视频版

知乎视频www.zhihu.com

axure8 事件改变样式_15. 教你零基础搭建小程序：小程序事件绑定（2）相关推荐

点击button后改变文字_27. 教你零基础搭建小程序：小程序的常见组件—button
筒子们,这一章接着讲Button 标签. 开放能力的属性 button标签的开放能力是指open-type 属性. 其中,这个属性的合法值包括如下: 这一部分呢,需要分为两个方式来演示. 一是可在模拟 ...
局部配置和全局配置_06. 教你零基础搭建小程序（解读全局配置文件-tabBar字段）...
自从开始在知乎上发教程后,发现一个事情啊, 大家对于我写的教程,都在偷偷地收藏~~ 但是, 却没有银点赞~ 知乎这个平台吧,点赞的分量比收藏更大, 这里也不是要赞(我知道自己还能做的更好), 只是希望 ...
input 事件_14. 教你零基础搭建小程序：小程序事件绑定（1）
图文版本章以及下一章学习小程序的事件绑定,我们通过一个案例来讲解其中相关的知识点,便于大家理解哦~~ 首先,先来看这个案例的需求. 我们使用画图工具,先在上面绘制一个小程序页面, 如下图: 再在页面 ...
小程序如何用data的数据控制页面展示_17. 教你零基础搭建小程序：小程序事件绑定（1）
本章以及下一章学习小程序的事件绑定,我们通过一个案例来讲解其中相关的知识点,便于大家理解哦~~ 首先,先来看这个案例的需求. 我们使用画图工具,先在上面绘制一个小程序页面,如下图: 再在页面的最上方放 ...
小程序input wxss_19. 教你零基础搭建小程序：wxss-尺寸单位
这章以后的四章都是介绍小程序样式文件--wxss 的使用,分为以下三个部分一.尺寸方案二.样式导入三.选择器这章先来讲wxss的尺寸单位-- rpx wxss的定义: WXSS( WeiXin ...
微信小程序怎么在wxml中插入多个图片_22. 教你零基础搭建小程序：小程序的常见组件（2）- image
大家好~今天讲小程序的常见组件-- image 图片标签小程序中的图片标签相当于 web 中的图片标签 ,但也存在着不同之处. 例如:小程序在后期要打包上线时,对图片的大小是有要求的,图片要< ...
零基础搭建智能垃圾分类小程序(可做毕设，可加入流量主，赚取零花钱)
1.先上图 2.准备工作一.申请一个小程序申请地址:微信公众平台, 申请小程序的操作很简单,大家百度一下跟着步骤申请就行,某宝上还有认证小程序代申请代认证,老铁们可以自行选择. 二.下载微信 ...
计算机零基础速学,教你零基础学习电脑绘画！
原标题:教你零基础学习电脑绘画! (这是一幅电脑绘图图片) 相信大家可能会跟小葵一样,看到好看的图片,也想通过自己的努力绘画出来,可惜小葵没有绘画天赋,不过小葵还是有整理绘画技巧的干货天赋的!!保证你 ...
学计算机换屏幕,自已动手修电脑省钱省时，手把手教你零基础学会笔记本如何换屏...
原标题:自已动手修电脑省钱省时,手把手教你零基础学会笔记本如何换屏笔记本电脑做为大家随身携带的移动电脑解决了大家移动办公的需求,他可以让我们在旅游,出差的时候能随时随地办公,给我们提供了极大的方便. ...

axure8 事件改变样式_15. 教你零基础搭建小程序：小程序事件绑定（2）

图文版

总结：

视频版

axure8 事件改变样式_15. 教你零基础搭建小程序：小程序事件绑定（2）相关推荐

最新文章

热门文章