微信小程序实现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控件autocomplete 0.11演示及下载 1月5日已更新
Jan 09 Javascript
jQuery中add实现同时选择两个id对象
Oct 22 Javascript
浅析jQuery中调用ajax方法时在不同浏览器中遇到的问题
Jun 11 Javascript
node.js中的Socket.IO使用实例
Nov 04 Javascript
JavaScript插件化开发教程 (一)
Jan 27 Javascript
javascript实现右下角广告框效果
Feb 01 Javascript
Angular2管道Pipe及自定义管道格式数据用法实例分析
Nov 29 Javascript
Angular2整合其他插件的方法
Jan 20 Javascript
详解vue中axios的封装
Jul 18 Javascript
layer.open组件获取弹出层页面变量、函数的实例
Sep 25 Javascript
Vue修改项目启动端口号方法
Nov 07 Javascript
解决vue页面刷新,数据丢失的问题
Nov 24 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
单一index.php实现PHP任意层级文件夹遍历(Zjmainstay原创)
2012/07/31 PHP
PHP常用特殊运算符号和函数总结(php新手入门必看)
2013/02/02 PHP
探讨:如何使用PHP实现计算两个日期间隔的年、月、周、日数
2013/06/13 PHP
php构造函数实例讲解
2013/11/13 PHP
php解析http获取的json字符串变量总是空白null
2015/03/02 PHP
php和editplus正则表达式去除空白行
2015/04/17 PHP
PHP chunk_split()函数讲解
2019/02/12 PHP
js实现点击注册按钮开始读秒倒计时的小例子
2013/05/11 Javascript
js字符串转换成数字与数字转换成字符串的实现方法
2014/01/08 Javascript
轻松创建nodejs服务器(9):实现非阻塞操作
2014/12/18 NodeJs
属于你的jQuery提示框(Tip)插件
2016/01/20 Javascript
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
2016/03/30 Javascript
获取JavaScript异步函数的返回值
2016/12/21 Javascript
通过AngularJS实现图片上传及缩略图展示示例
2017/01/03 Javascript
微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
2017/12/09 Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
2019/04/23 Javascript
js实现坦克移动小游戏
2019/10/28 Javascript
vue-form表单验证是否为空值的实例详解
2019/10/29 Javascript
原生javascript的ajax请求及后台PHP响应操作示例
2020/02/24 Javascript
Vue列表循环从指定下标开始的多种解决方案
2020/04/08 Javascript
three.js 利用uv和ThreeBSP制作一个快递柜功能
2020/08/18 Javascript
[16:56]教你分分钟做大人:司夜刺客
2014/10/30 DOTA
python正则匹配查询港澳通行证办理进度示例分享
2013/12/27 Python
跟老齐学Python之复习if语句
2014/10/02 Python
python中列表和元组的区别
2017/12/18 Python
Python使用win32com模块实现数据库表结构自动生成word表格的方法
2018/07/17 Python
Python高级编程之继承问题详解(super与mro)
2019/11/19 Python
html5贪吃蛇游戏使用63行代码完美实现
2013/06/25 HTML / CSS
ALDI奥乐齐官方海外旗舰店:德国百年超市
2017/12/27 全球购物
eDreams葡萄牙:全球最大的在线旅行社之一
2019/04/15 全球购物
英国性能汽车零件和发动机配件在线:Maxpeedingrods
2019/11/05 全球购物
护士专业推荐信
2013/11/02 职场文书
自荐信封面
2013/12/04 职场文书
党员组织关系介绍信
2014/02/13 职场文书
物业保洁员岗位职责
2015/02/13 职场文书
如何打开Win11系统注册表编辑器?Win11注册表编辑器打开修复方法
2022/04/05 数码科技