微信小程序 bindtap 事件多参数传递

在微信小程序中,我们无法直接通过 bindtap="handleClick(1,2,3)" 的方式传递参数,而是需要通过自定义属性 data- 的方式进行传递,并在事件回调函数中通过 event.currentTarget.dataset 来获取这些参数。然而,这种传参方式不够友好,尤其是在传递多个参数时,需要特别注意参数的形式和命名方式。

微信小程序

代码示例

  • index.wxml
<template name="like"><view class="like-line"></view><view class="like-wrap"><view class="like {{ item.feedbackType === 1 ? 'selected' : '' }}" bindtap="like" data-args="{{ {item, index, type: 1} }}"><!--      👍--></view><view class="dislike {{ item.feedbackType === 2 ? 'selected' : '' }}" bindtap="like" data-args="{{ {item, index, type: 2} }}"><!--      👎--></view></view>
</template>
  • index.js
Page({async like(e) {let { item, type, index } = e.currentTarget.dataset['args']let { feedbackType, recordId } = itemconsole.log({ type, index, feedbackType, recordId })// do something},
})

注意:

  • 自定义属性命名,不能包含大写字母,大写会自动转成小写,可能会导致获取不到参数。如 data-recordId 会自动转成 data-recordid
  • 如果使用 data-record-id 的形式,最终在 event.target.dataset 中会将 - 转成驼峰的形式,即 recordId,取值需要用 event.target.dataset['recordId']

欢迎访问:天问博客

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/259583.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

代理IP怎么使用?Mac苹果系统设置http代理IP教程

代理IP是一种通过将请求转发到另一个服务器&#xff0c;以隐藏自己的真实IP地址的服务器。使用代理IP可以保护您的隐私和安全&#xff0c;防止被跟踪或被攻击。在本文中&#xff0c;我们将介绍如何在Mac苹果系统上设置http代理IP教程。 一、了解代理IP 代理IP地址是一种可以用来…

自动化使用GradCAM处理图片(用于ViT和swin的变体)附链接

GradCAM_On_ViT 用于可视化模型结果的 GradCAM 自动脚本 如何在 GradCam 中调整 XXXFormer 请确保您的模型格式正确。 如果您应用的变压器是类似 swin&#xff08;无ClassToken&#xff09;或类似 ViT &#xff08;有ClassToken&#xff09; 张量的形状可能看起来像[Batc…

从根上理解elasticsearch(lucene)查询原理(1)-lucece查询逻辑介绍

大家好&#xff0c;我是蓝胖子&#xff0c;最近在做一些elasticsearch 慢查询优化的事情&#xff0c;通常用分析elasticsearch 慢查询的时候可以通过profile api 去分析&#xff0c;分析结果显示的底层lucene在搜索过程中使用到的函数调用。所以要想彻底弄懂elasticsearch慢查询…

UDP群聊

客户端 import java.awt.BorderLayout; import java.awt.Dimension; import java.awt.EventQueue; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader…

hbuilder + uniapp +vue3 开发微信云小程序

1、创建项目&#xff1a; 2、创建项目完成的默认目录结构&#xff1a; 3、在根目录新建一个文件夹cloudFns&#xff08;文件名字随便&#xff09;&#xff0c;存放云函数源码&#xff1a; 4、修改manifest.json文件&#xff1a;添加 小程序 appid和cloudfunctionRoot&#xff0…

Docker安装Mysql数据库

1. 前言 XXXXX 2. Docker中安装MySQL服务 以下以mysql8.2版本为例&#xff0c;mysql5.7的步骤也是一样的 2.1. 查看可用的MySQL版本 # 搜索镜像 docker search mysql2.2. 拉取MySQL镜像 # 拉取镜像 docker pull mysql# 或者 docker pull mysql:latest2.3. 查看本地镜像 …

关于IDEA中maven的作用以及如何配置MAVEN

关于IDEA中maven的作用以及如何配置MAVEN 1、Maven是什么2、Idea中对于Maven的配置3、下载依赖时&#xff0c;Idea下方的显示3.1、Maven中央仓库的下载显示界面3.2、阿里云仓库的下载显示界面 4、Maven在Idea中的使用4.1、clean4.2、validate4.3、compile4.4、test&#xff08;…

数据结构-线性表的链式存储结构

术语&#xff1a; 1.结点&#xff1a;数据元素的存储映像。有数据域和指针域两部分组成。 2.链表&#xff1a;n个结点由指针组成一个链表 3.结点只有一个指针域的链表&#xff0c;成为单链表或线性链表。 4.结点有两个指针域的链表&#xff0c;成为双链表。 5.首尾相接的链…

8 个顶级的 PDF 转 Word 转换器

PDF 是跨不同平台分发信息而不影响内容格式的好方法。但这种安全级别确实有其缺点。没有直接的方法来编辑 PDF 上的文本或内容。编辑 PDF 文档的唯一方法是将其转换为 Word 文档或其他可以编辑的文件类型。将 PDF 转换为 Word 是根据需要编辑 PDF 内容的最快方法。有许多免费的…

Python中的深拷贝和浅拷贝的区别

目录 一、深拷贝和浅拷贝的概念 二、Python中的深拷贝和浅拷贝实现 三、深拷贝和浅拷贝的区别及适用场景 四、如何选择深拷贝和浅拷贝 五、总结 在Python中&#xff0c;深拷贝和浅拷贝是非常重要的概念&#xff0c;它们在处理对象和数据结构时有着截然不同的行为。理解深拷…

MN316 OpenCPU丨HTTP使用介绍

HTTP&#xff08;Hyper Text Transfer Protocol&#xff09;即超文本传输协议&#xff0c;是一个简单的请求-响应协议&#xff0c;通常运行在TCP之上&#xff0c;它指定了客户端可能发送给服务器消息类型以及得到什么类型响应。HTTPS&#xff08;Hyper Text Transfer Protoc…

Windows 系统,TortoiseSVN 无法修改 Log 信息解决方法

使用SVN提交版本信息时&#xff0c;注释内容写的不全。通过右键TortoiseSVN的Show log看到提交的的注释&#xff0c;右键看到Edit log message的选项&#xff0c;然而提交后却给出错误提示&#xff1a; Repository has not been enabled to accept revision propchanges; ask …