微信小程序实现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 相关文章推荐
简约JS日历控件 实例代码
Jul 12 Javascript
将文本输入框内容加入表中的js代码
Aug 18 Javascript
深入理解node.js之path模块
May 03 Javascript
ES6正则表达式的一些新功能总结
May 09 Javascript
Vue.js手风琴菜单组件开发实例
May 16 Javascript
react 应用多入口配置及实践总结
Oct 17 Javascript
小程序自定义日历效果
Dec 29 Javascript
vue的滚动条插件实现代码
Sep 07 Javascript
你可能从未使用过的11+个JavaScript特性(小结)
Jan 08 Javascript
如何在JavaScript中创建具有多个空格的字符串?
Feb 23 Javascript
多页vue应用的单页面打包方法(内含打包模式的应用)
Jun 11 Javascript
在vue-cli3中使用axios获取本地json操作
Jul 30 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
递归列出所有文件和目录
2006/10/09 PHP
php判断是否为json格式的方法
2014/03/04 PHP
PHP测试成功的邮件发送案例
2015/10/26 PHP
详解php协程知识点
2018/09/21 PHP
利用jQuary实现文字浮动提示效果示例代码
2013/12/26 Javascript
js带缩略图的图片轮播效果代码分享
2015/09/14 Javascript
浅谈JavaScript 覆盖原型以及更改原型
2016/08/31 Javascript
Bootstrap modal使用及点击外部不消失的解决方法
2016/12/13 Javascript
JavaScript实现图片瀑布流和底部刷新
2017/01/02 Javascript
js转换对象为xml
2017/02/17 Javascript
Bootstrap面板(Panels)的简单实现代码
2017/03/17 Javascript
JavaScript运动框架 链式运动到完美运动(五)
2017/05/18 Javascript
Vue.js 2.5新特性介绍(推荐)
2017/10/24 Javascript
原生JS与jQuery编写简单选项卡
2017/10/30 jQuery
webpack手动配置React开发环境的步骤
2018/07/02 Javascript
深入解析vue 源码目录及构建过程分析
2019/04/24 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
2020/02/19 Javascript
javascript实现贪吃蛇小练习
2020/07/05 Javascript
Vue组件间数据传递的方式(3种)
2020/07/13 Javascript
在arcgis使用python脚本进行字段计算时是如何解决中文问题的
2015/10/18 Python
Windows下Python的Django框架环境部署及应用编写入门
2016/03/10 Python
Python编程之黑板上排列组合,你舍得解开吗
2017/10/30 Python
解决Python安装后pip不能用的问题
2018/06/12 Python
twilio python自动拨打电话,播放自定义mp3音频的方法
2019/08/08 Python
python matplotlib拟合直线的实现
2019/11/19 Python
numpy创建单位矩阵和对角矩阵的实例
2019/11/29 Python
python实现的分析并统计nginx日志数据功能示例
2019/12/21 Python
python输出结果刷新及进度条的实现操作
2020/07/13 Python
HTML5文档结构标签
2017/04/21 HTML / CSS
基于MUI框架使用HTML5实现的二维码扫描功能
2018/03/01 HTML / CSS
Whittard官方海外旗舰店:英国百年茶叶品牌
2018/02/22 全球购物
承办会议欢迎词
2014/01/17 职场文书
2014庆六一活动方案
2014/03/02 职场文书
严以用权专题学习研讨会发言材料
2015/11/09 职场文书
老生常谈 使用 CSS 实现三角形的技巧(多种方法)
2021/04/13 HTML / CSS
Python基础 括号()[]{}的详解
2021/11/07 Python