微信小程序实现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 打开页面window.location和window.open的区别
Mar 17 Javascript
基于jquery的关于动态创建DOM元素的问题
Dec 24 Javascript
jquery trim() 功能源代码
Feb 14 Javascript
jQuery多项选项卡的实现思路附样式及代码
Jun 03 Javascript
极易被忽视的javascript面试题七问七答
Feb 15 Javascript
Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法
Oct 30 Javascript
微信小程序 天气预报开发实例代码源码
Jan 20 Javascript
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
Apr 20 jQuery
微信小程序实现导航栏选项卡效果
Jun 19 Javascript
layer弹出层自定义提交取消按钮的例子
Sep 10 Javascript
在antd4.0中Form使用initialValue操作
Nov 02 Javascript
详解JavaScript中的this指向问题
Feb 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下使用SimpleXML 处理XML 文件
2010/02/27 PHP
PHP 命令行工具 shell_exec, exec, passthru, system详细使用介绍
2011/09/11 PHP
thinkphp控制器调度使用示例
2014/02/24 PHP
thinkphp命名空间用法实例详解
2015/12/30 PHP
php实现的错误处理封装类实例
2017/06/20 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
YII框架模块化处理操作示例
2019/04/26 PHP
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
js浮点数保留两位小数点示例代码(四舍五入)
2013/12/26 Javascript
javascript实现简单的贪吃蛇游戏
2015/03/31 Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
2015/09/18 Javascript
vue.js入门(3)——详解组件通信
2016/12/02 Javascript
vue实现ajax滚动下拉加载,同时具有loading效果(推荐)
2017/01/11 Javascript
微信小程序 template模板详解及实例代码
2017/03/09 Javascript
详解如何在NodeJS项目中优雅的使用ES6
2017/04/22 NodeJs
使用D3.js制作图表详解
2017/08/13 Javascript
layui中layer前端组件实现图片显示功能的方法分析
2017/10/13 Javascript
javascript实现QQ空间相册展示源码
2017/12/12 Javascript
微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例
2018/12/20 Javascript
命令行批量截图Node脚本示例代码
2019/01/25 Javascript
Vue CLI3基础学习之pages构建多页应用
2019/06/02 Javascript
js动态获取时间的方法分析
2019/08/02 Javascript
thinkjs微信中控之微信鉴权登陆的实现代码
2019/08/08 Javascript
vue 将多个过滤器封装到一个文件中的代码详解
2020/09/05 Javascript
Vue中使用JsonView来展示Json树的实例代码
2020/11/16 Javascript
Python去除列表中重复元素的方法
2015/03/20 Python
Sanic框架异常处理与中间件操作实例分析
2018/07/16 Python
python画柱状图--不同颜色并显示数值的方法
2018/12/13 Python
python中时间、日期、时间戳的转换的实现方法
2019/07/06 Python
由面试题加深对Django的认识理解
2019/07/19 Python
如何用Python绘制3D柱形图
2020/09/16 Python
澳大利亚冲浪和时尚服装网上购物:SurfStitch
2017/07/29 全球购物
大学生职业生涯规划书模板
2014/01/03 职场文书
投标单位介绍信
2014/01/09 职场文书
2015年元旦主持词开场白
2014/12/14 职场文书
2015年学校远程教育工作总结
2015/07/20 职场文书