网站建设期间工作,由音乐学院做的网站,各大网站投稿,视频网站后台模板目录
步骤一#xff1a;按钮的创建
步骤二#xff1a;按钮属性配置
步骤三#xff1a;添加点击事件
步骤四#xff1a;参数传递
步骤五#xff1a;打印数据
步骤六#xff1a;获取数据
步骤七#xff1a;父进程验证
总结#xff1a;data-*自定义数据和mark-自定… 目录
步骤一按钮的创建
步骤二按钮属性配置
步骤三添加点击事件
步骤四参数传递
步骤五打印数据
步骤六获取数据
步骤七父进程验证
总结data-*自定义数据和mark-自定义数据的区别 事件传参在触发事件时,将一些数据作为参数传递给事件处理函数的过程,就是事件传参。 在微信小程序中,我们经常会在组件上添加一些自定义数据,然后在事件处理函数中获取这些自定义数据,从而完成业务逻辑的开发。 上一章我们了解到在组件上通过data-的方式定义需要传递的数据其中*是自定义的属性,例如: view data-id100 bindtaphandier/然后通过事件对象进行获取自定义数据。 零基础手把手教你创建微信小程序十六·事件传参·data-*自定义数据-CSDN博客 本章我们讲解另一种方法小程序进行事件传参的时候除了使用 data-* 属性传递参数外还可以使用 mark 标记传递参数mark是一种自定义属性可以在组件上添加用于来识别具体触发事件的target节点。 同时mark还可以用于承载一些自定义数据在组件上使用 mark:自定义属性 的方式将数据传递给事件处理函数。 例如 view mark:id100 bindtaphandler/然后通过事件对象进行获取自定义数据
步骤一按钮的创建 找到购物车页面找到其文件路径快速找到cart.wxml文件编写代码创建一个按钮 viewbutton按钮/button
/view 步骤二按钮属性配置 找打上一配置的cate.scss文件将其中的内容复制粘贴到cart.scss文件中配置按钮相关属性
view{display: flex;height: 300rpx;background-color: skyblue;align-items: center;
} 步骤三添加点击事件 在cart.wxml文件中创建一个名为“bluHandler”的点击事件 viewbutton bind:tapbtuHandler按钮/button
/view 步骤四参数传递 如果需要使用 mark 进行事件传参如果需要使用 mark自定义属性的方式进行参数传递 view!-- 如果需要使用 mark 进行事件传参如果需要使用 mark自定义属性的方式进行参数传递 --button bind:tapbtuHandler mark:id1 mark:nametom按钮/button
/view 步骤五打印数据 找到cart.js文件对按钮绑定事件进行处理 Page({// 按钮绑定的事件处理函数btuHandler(event){console.log(event)}
}) 步骤六获取数据 Page({// 按钮绑定的事件处理函数btuHandler(event){console.log(event.mark.id)console.log(event.mark.name)}
}) 步骤七父进程验证 找到cart.wxml对view添加事件 view bind:tapparentHandler mark:parentid1 mark:parentnametom!-- 如果需要使用 mark 进行事件传参如果需要使用 mark自定义属性的方式进行参数传递 --!-- button bind:tapbtuHandler mark:id1 mark:nametom按钮/button --button mark:id1 mark:nametom按钮/button
/view 在找到cart.js文件对view创建的事件读取 首先点击蓝色区域不点击按钮 Page({// 按钮绑定的事件处理函数btuHandler(event){console.log(event.mark.id)console.log(event.mark.name)},//view 绑定的事件处理函数parentHandler(event){//先点击蓝色区域// 通过事件对象获取的是 view 身上绑定的数据console.log(event)}
}) 点击按钮不点击蓝色区域 Page({// 按钮绑定的事件处理函数btuHandler(event){console.log(event.mark.id)console.log(event.mark.name)},//view 绑定的事件处理函数parentHandler(event){//先点击蓝色区域// 通过事件对象获取的是 view 身上绑定的数据// 先点击按钮(不点击蓝色区域)console.log(event)}
}) 总结data-*自定义数据和mark-自定义数据的区别 对于 data-*自定义数据 点击蓝色区域不点击按钮 currentTarget 事件绑定者view target 事件触发者view 不点击蓝色区域点击按钮 currentTarget 事件绑定者view target 事件触发者按钮 如果想获取 view 身上的数据就必须使用 currentTarget 才可以。 如果想获取的是时间触发者本身数据就需要使用 target。 对于 mark-自定义数据 点击蓝色区域不点击按钮 通过事件对象获取的是 view 身上绑定的数据 不点击蓝色区域点击按钮 通过事件对象获取到的是 触发事件的节点 以及父节点身上的所有 mark 数据 微信小程序开发_时光の尘的博客-CSDN博客
