微信小程序:bindtap等事件传参
事件是视图层到逻辑层的通讯方式。 事件可以将用户的行为反馈到逻辑层进行处理。
事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。
事件对象可以携带额外信息,如 id, dataset, touches。
详解(以常见的tap点击事情为例)
wxml
<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>
JS
Page({
tapName: function(event) {
console.log(event)
}
})
event 打印结果
{
"type":"tap",
"timeStamp":895,
/////////////////////////////////
"target": {
"id": "tapTest",
"dataset": {
"hi":"WeChat"
}
},
"currentTarget": {
"id": "tapTest",
"dataset": {
"hi":"WeChat"
}
},
///////////////////////////////
"detail": {
"x":53,
"y":14
},
"touches":[{
"identifier":0,
"pageX":53,
"pageY":14,
"clientX":53,
"clientY":14
}],
"changedTouches":[{
"identifier":0,
"pageX":53,
"pageY":14,
"clientX":53,
"clientY":14
}]
}
注意两点:
1、data-名称 不能有大写字母,如果需要,可以通过 - (中划线)来连接单词,编译的时候小程序会将第二个单词首字母自动大写。图中代码是为了自己标志,所以第二个单词的首字母大写了,其实可以不用。data-* 属性中不可以存放对象。
2、注意打印结果中target和currentTarget的区别。
target 触发事件的源组件。
currentTarget 事件绑定的当前组件。
如果你在父容器上绑定了事件并传参,当你点击父容器时,事件绑定的组件和触发事件的源组件是同一个元素,所以currentTarget 、target 都可以拿到参数,但是当你点击子元素时,target 就不是事件绑定的组件了,所以拿不到参数。
由于事件冒泡的机制,父容器上绑定的事件依然可以触发,所以currentTarget 依然可以拿到参数。
说明
id传参和dataset类似,只是最后获取值的时候不同。event.currentTarget.id
微信小程序:bindtap等事件传参的更多相关文章
- 微信小程序 - bindtap等事件传参
什么是事件事件是视图层到逻辑层的通讯方式. 事件可以将用户的行为反馈到逻辑层进行处理. 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数. 事件对象可以携带额外信息,如 id, ...
- 微信小程序之跨界面传参
微信小程序在两个之间传参类似js传递url拼接参数,举个例子来说吧 input自己设置参数 //index.wxml <form bindsubmit="formSubmit" ...
- 微信小程序6 - 页面之间传参及通知系统封装
1. 简单传参 wx.navigateTo({ url: '/pages/demo/index/index?id=1' }) /pages/demo/index/index.js 中 onLoad(o ...
- 微信小程序页面跳转传参
1.传递参数方法 使用navigatior组件 <navigator url="/pages/pull/pull?title=lalla&name=cc" hov ...
- 微信小程序页面跳转传参方式
//实现跳转的A页面 jump: function () { let a = 1; let b = 2; wx.navigateTo({ url: '/page/vipOrder/vipOrder?d ...
- 小程序页面跳转传参-this和that的区别-登录流程-下拉菜单-实现画布自适应各种手机尺寸
小程序页面跳转传参 根目录下的 app.json 文件 页面文件的路径.窗口表现.设置网络超时时间.设置多 tab { "pages": [ "pages/index/i ...
- 微信小程序开发 [03] 事件、数据绑定和传递
1.事件绑定 在微信小程序中,事件的绑定依附于组件,当事件触发时,就会执行事件对应的处理函数. 我们回到前几章中的例子,将index页面调整为首页(app.json中调整pages数组元素的顺序),此 ...
- 微信小程序中的事件绑定
前言: 微信小程序中的事件绑定和Vue中的事件绑定其实有很多的相似之处,所以如果有过Vue相关的经验,学起来的话还是比较容易的. js代码: // 页面级的js文件必须调用Page函数来注册页面, / ...
- 微信小程序--阻止冒泡事件
微信小程序事件的使用方式 在组件中绑定一个事件处理函数. 如bindtap,当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数. <view id="tapTest ...
- [组件封装]微信小程序-图片批量上传照片墙
描述 批量上传图片, 可设置最大上传个数, 可删除, 可设置默认值. 效果 源码 pictures-wall.wxml <view class="picturesWall"& ...
随机推荐
- ORA-16447 Redo apply was not active at the target standby database
Cause ALTER SYSTEM FLUSH REDO TO STANDBY failed because redo apply is not active at the target datab ...
- 下载fiddler证书并设置信任
一.苹果手机 待整理 二.android手机 待整理
- (原)pycharm中使用CUDA_VISIBLE_DEVICES
转载请注明出处: http://www.cnblogs.com/darkknightzh/p/8576825.html 如果使用多gpu运行程序,可以直接使用CUDA_VISIBLE_DEVICES= ...
- 安装二维码、条形码识别工具zbar
参考:http://blog.csdn.net/gaofuqi/article/details/26698547 http://www.imagemagick.org/download/ImageMa ...
- 如何获取ubuntu源码包里面的源码?
ubuntu 源仓库说明 1.在获取源码包之前,确保在软件源配置文件/etc/apt/sources.list中添加了deb-src项 vim /etc/apt/sources.list # # de ...
- 阿里云 ssh 登陆请使用(公)ip
一直以为要要登陆使用的是私有的ip,最后才发现是使用共有ip, 如图 47.52.69.151 > ssh root@47.52.69.151 > 输入密码
- SNF快速开发平台--规则引擎整体介绍及使用说明书
一.设计目标 a)规则引擎语法能够满足分单,计费,WMS策略的配置要求.语法是一致和统一的 b)能够在不修改规则引擎模块的情况下,加入任意一个新的规则:实现上述需求之外的规则配置需求 c)运算速度快 ...
- 关于NSString的@""和nil时的判断方法
1.NSString *str = @"";该语句代表是一个空串,并且不为nil,占有内存空间 2.NSString *str = nil;该语句代表,str不指向任何对象,指针指 ...
- SpringMVC(Springboot)返回文件方法
https://blog.csdn.net/Lynn_coder/article/details/79953977 ****************************************** ...
- jstack 命令的使用和堆栈分析
原文:https://www.cnblogs.com/kongzhongqijing/articles/3630264.html 一.介绍 jstack 是 Java 虚拟机自带的一种堆栈跟踪工具.j ...