微信小程序实现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 相关文章推荐
javascript 触发事件列表 比较不错
Sep 03 Javascript
取得窗口大小 兼容所有浏览器的js代码
Aug 09 Javascript
深入理解Javascript动态方法调用与参数修改的问题
Dec 10 Javascript
window.location.href的用法(动态输出跳转)
Aug 09 Javascript
浅谈javascript面向对象程序设计
Jan 21 Javascript
HTML5之WebSocket入门3 -通信模型socket.io
Aug 21 Javascript
编写高性能Javascript代码的N条建议
Oct 12 Javascript
原生实现一个react-redux的代码示例
Jun 08 Javascript
JavaScript判断浏览器版本的方法
Nov 03 Javascript
夯基础之手撕javascript继承详解
Nov 09 Javascript
解决vue-cli输入命令vue ui没效果的问题
Nov 17 Javascript
关于vue中如何监听数组变化
Apr 28 Vue.js
详解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者的疑难问答(2)
2006/10/09 PHP
php笔记之:数据类型与常量的使用分析
2013/05/14 PHP
windows下PHP_intl.dll正确配置方法(apache2.2+php5.3.5)
2014/01/14 PHP
php中最简单的字符串匹配算法
2014/12/16 PHP
JS保存、读取、换行、转Json报错处理方法
2013/06/14 Javascript
现代 JavaScript 开发编程风格Idiomatic.js指南中文版
2014/05/28 Javascript
node.js中的require使用详解
2014/12/15 Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
2015/10/16 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
2015/11/30 Javascript
jQuery手动点击实现图片轮播特效
2020/04/20 Javascript
很全面的JavaScript常用功能汇总集合
2016/01/22 Javascript
详解JS正则replace的使用方法
2016/03/06 Javascript
jQuery焦点图轮播插件KinSlideshow用法分析
2016/06/08 Javascript
Nodejs中 npm常用命令详解
2016/07/04 NodeJs
AngularJS中的DOM操作用法分析
2016/11/04 Javascript
BootStrapValidator初使用教程详解
2017/02/10 Javascript
jQuery.Ajax()的data参数类型详解
2017/07/23 jQuery
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
2018/09/19 Javascript
js实现点击展开隐藏效果(实例代码)
2018/09/28 Javascript
微信小程序导航栏跟随滑动效果的实现代码
2019/05/14 Javascript
vue 实现走马灯效果
2019/10/28 Javascript
[50:54]完美世界DOTA2联赛 GXR vs IO 第三场 11.07
2020/11/10 DOTA
Python内置模块logging用法实例分析
2018/02/12 Python
python绘制散点图并标记序号的方法
2018/12/11 Python
Pandas 重塑(stack)和轴向旋转(pivot)的实现
2019/07/22 Python
Python类的绑定方法和非绑定方法实例解析
2020/03/04 Python
Django-silk性能测试工具安装及使用解析
2020/11/28 Python
浅析Python 中的 WSGI 接口和 WSGI 服务的运行
2020/12/09 Python
python利用文件时间批量重命名照片和视频
2021/02/09 Python
一些关于MySql加速和优化的面试题
2014/01/30 面试题
研究生考核个人自我鉴定
2014/03/27 职场文书
大学生党员批评与自我批评
2014/09/28 职场文书
新党章的学习心得体会
2014/11/07 职场文书
践行三严三实心得体会(2016推荐篇)
2016/01/06 职场文书
浅谈JS和Nodejs中的事件驱动
2021/05/05 NodeJs
PHP实现rar解压读取扩展包小结
2021/06/03 PHP