微信小程序实现bindtap等事件传参


Posted in Javascript onApril 08, 2019

之前一直以为微信小程序按钮点击事件传参是和web端相同,即在事件中写明所传递的参数即可,但是这样尝试过以后发现小程序的控制台报错,报所写的bindtap中参数错误,之后百度发现,小程序按钮点击这类事件时一般的处理方法是指明元素所在的id,bindtap只是写明函数名,例如,bindtap='setNumber',而不是bindtap='setNumber(1)',在js中只要写function(e).通过e可以获取所传过来元素的所有信息。

什么是事件

事件是视图层到逻辑层的通讯方式。 事件可以将用户的行为反馈到逻辑层进行处理。

事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。

事件对象可以携带额外信息,如 id, dataset, touches。

微信小程序实现bindtap等事件传参

微信小程序实现bindtap等事件传参

看图,因为需要传递的数据比较多,所以我们通过dataset携带参数信息。如果只有一个参数,可以通过id来传递。

详解(以常见的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

PS:小程序 view使用bindtap传值问题

如图,view标签 加 bindtap事件,用data-name传值,如果view中只有文字,点击整个view区域都可以接收到data-name的值,如果view里面加一个lable标签,那么点击lable包裹的区域,data-name取不到值。  解决方法:把取值方式  由e.target.dataset.carrierName  修改为e.currentTarget.dataset.carrierName即可

微信小程序实现bindtap等事件传参

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)
Feb 14 Javascript
window.dialogArguments 使用说明
Apr 11 Javascript
jquery 定位input元素的几种方法小结
Jul 28 Javascript
JS的Document属性和方法小结
Sep 17 Javascript
js控制网页前进和后退的方法
Jun 08 Javascript
基于Flowplayer打造一款免费的WEB视频播放器附源码
Sep 06 Javascript
极易被忽视的javascript面试题七问七答
Feb 15 Javascript
基于JavaScript实现轮播图原理及示例
Apr 10 Javascript
jquery点赞功能实现代码 点个赞吧!
May 29 jQuery
利用types增强vscode中js代码提示功能详解
Jul 07 Javascript
Vue2.0父组件与子组件之间的事件发射与接收实例代码
Sep 19 Javascript
JS中如何优雅的使用async await详解
Oct 05 Javascript
详解vue中axios请求的封装
Apr 08 #Javascript
使用taro开发微信小程序遇到的坑总结
Apr 08 #Javascript
vue+element+Java实现批量删除功能
Apr 08 #Javascript
如何为你的JavaScript代码日志着色详解
Apr 08 #Javascript
详解element-ui日期时间选择器的日期格式化问题
Apr 08 #Javascript
小程序获取当前位置加搜索附近热门小区及商区的方法
Apr 08 #Javascript
服务端预渲染之Nuxt(使用篇)
Apr 08 #Javascript
You might like
php Xdebug 调试扩展的安装与使用.
2010/03/13 PHP
PHP技术开发技巧分享
2010/03/23 PHP
php DOS攻击实现代码(附如何防范)
2012/05/29 PHP
解析php获取字符串的编码格式的方法(函数)
2013/06/21 PHP
PHP中使用file_get_contents抓取网页中文乱码问题解决方法
2014/12/17 PHP
Laravel事件监听器用法实例分析
2019/03/12 PHP
php中的依赖注入实例详解
2019/08/14 PHP
判断是否输入完毕再激活提交按钮
2006/06/26 Javascript
javascript 命名规则 变量命名规则
2010/02/25 Javascript
asp.net+jquery滚动滚动条加载数据的下拉控件
2010/06/25 Javascript
JavaScript判断对象是否为数组
2015/12/22 Javascript
bootstrap组件之按钮式下拉菜单小结
2017/01/19 Javascript
jQuery插件HighCharts绘制2D带Label的折线图效果示例【附demo源码下载】
2017/03/08 Javascript
jQuery实现鼠标经过显示动画边框特效
2017/03/24 jQuery
JS 组件系列之BootstrapTable的treegrid功能
2017/06/16 Javascript
详解vue-cli + webpack 多页面实例配置优化方法
2017/07/13 Javascript
Vue项目查看当前使用的elementUI版本的方法
2018/09/27 Javascript
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
2018/11/08 Javascript
[01:35]2018年度CS GO最佳战队-完美盛典
2018/12/17 DOTA
Python解决线性代数问题之矩阵的初等变换方法
2018/12/12 Python
python贪吃蛇游戏代码
2020/04/18 Python
python rsa实现数据加密和解密、签名加密和验签功能
2019/09/18 Python
深入理解css中vertical-align属性
2017/04/18 HTML / CSS
HTML5 用动画的表现形式装载图像
2016/03/08 HTML / CSS
英国文胸专家:AmpleBosom.com
2018/02/06 全球购物
美国渔具店:FishUSA
2019/08/07 全球购物
资产评估专业学生的自我鉴定
2013/11/14 职场文书
党员学习党的群众路线思想汇报(5篇)
2014/09/10 职场文书
超市创业计划书
2014/09/15 职场文书
个人简历求职信范文
2015/03/20 职场文书
慰问信格式规范
2015/03/23 职场文书
感恩教育观后感
2015/06/17 职场文书
结婚十年感言
2015/07/31 职场文书
我对PyTorch dataloader里的shuffle=True的理解
2021/05/20 Python
Django分页器的用法你都了解吗
2021/05/26 Python
Python制作一个随机抽奖小工具的实现
2021/07/07 Python