微信小程序 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.mzph.cn/news/207312.shtml

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

相关文章

跨框架解决方案-Mitosis【Context】

Context Mitosis的context必须是&#xff1a; 在自己的文件中创建文件名必须以context.lite.ts结尾默认导出必须是一个返回context对象的函数 // simple.context.lite.ts import { createContext } from builder.io/mitosis;export default createContext({foo: bar,get foo…

速查!软考出成绩了

2023年11月软考成绩出来啦&#xff01;大家赶紧查一下&#xff0c;各科都45分就是通过&#xff01; 01 如何查成绩 1、打开“中国计算机技术职业资格网”&#xff0c;网址&#xff1a;https://www.ruankao.org.cn/ 2、点击↘的“成绩查询”按钮。 3、输入“手机号/证件号密码验…

光伏储能IC

光伏储能IC 电子元器件百科 文章目录 光伏储能IC前言一、光伏储能IC是什么二、光伏储能IC的类别三、光伏储能IC的应用实例四、光伏储能IC的作用原理总结前言 光伏储能IC可以提高光伏发电和储能系统的效率和稳定性,同时提供智能化的管理和控制功能。它在光伏发电和储能领域具有…

船舶机电设备智能故障诊断系统

1 船舶电气设备故障诊断专家系统 体系结构 整个系统的体系结构采用浏览器&#xff0f; 服务器 &#xff08;B&#xff0f; S&#xff09; 三层体系结构 &#xff08; 如图 1 所示 &#xff09;。B&#xff0f;S 模式是一种 以 Web 技术为基础的系统平台模式 。 把传统…

【GEE】时间序列多源遥感数据随机森林回归预测|反演|验证|散点图|完整代码

实验介绍 分类和回归之间的主要区别在于&#xff0c;在分类中&#xff0c;我们的预测目标是离散的类别&#xff0c;而在回归中&#xff0c;预测目标是连续的预测值。 本实验的研究区域位于佛蒙特州的埃塞克斯郡&#xff0c;使用训练数据来模拟土壤氧化还原深度&#xff0c;然…

Codeforces Round 851 (Div. 2 D:枚举+组合 Edp)

A - One and Two 相当于找第一个位置前后2的个数相同 #include<bits/stdc.h> using namespace std; const int N 1e610,mod998244353; #define int long long typedef long long LL; typedef pair<int, int> PII; const long long inf1e17; int n,m,k; int a[N]…

有哪些值得分享的销售拓客技巧?

拓客对于销售的重要性 拓客&#xff08;Toker&#xff09;是一个商业上的名词&#xff0c;核心就是提高售前服务、市场推广的水平&#xff0c;从而挖掘出潜在客户的隐形需求&#xff08;或称软需求&#xff09;。 拓客的核心&#xff0c;其实就是提高售前服务、市场推广的水平…

如何部署自己的服务渲染页面为Pdf文档

前言 相信大家都觉得官方发布的文档生成模块https://docs.mendix.com/appstore/modules/document-generation/很有用&#xff0c;它能把Mendix页面像素级导出到Pdf文件中&#xff0c;这对于归档等业务非常有价值。但部署依赖公有云提供的渲染服务&#xff0c;而中国本土用户对…

折半查找(数据结构实训)

题目&#xff1a; 标准输入输出 题目描述&#xff1a; 实现折半查找。要求查找给定的值在数据表中相应的存储位置。本题目假定输入元素均按非降序输入。 输入&#xff1a; 输入包含若干个测试用例&#xff0c;第一行为测试用例个数k。每个测试用例占3行&#xff0c;其中第一行为…

初识人工智能,一文读懂过拟合欠拟合和模型压缩的知识文集(3)

&#x1f3c6;作者简介&#xff0c;普修罗双战士&#xff0c;一直追求不断学习和成长&#xff0c;在技术的道路上持续探索和实践。 &#x1f3c6;多年互联网行业从业经验&#xff0c;历任核心研发工程师&#xff0c;项目技术负责人。 &#x1f389;欢迎 &#x1f44d;点赞✍评论…

SQL存储过程和视图

1 存储过程 存储过程是事先编写好、存储在数据库中的一组SQL命令集合。用来完成对数据库的指定操作。 1.1 优缺点 优点&#xff1a; 1&#xff09;提高系统性能。创建时进行编译&#xff0c;随后存放在数据库服务器的过程高速缓存中&#xff0c;之后不需要再次执行分析和编…

uniapp app将base64保存到相册,uniapp app将文件流保存到相册

如果是文件流可以先转base64详情见>uniapp 显示文件流图片-CSDN博客 onDown(){let base64 this.qrcodeUrl ; // base64地址const bitmap new plus.nativeObj.Bitmap("test");bitmap.loadBase64Data(base64, function() {const url "_doc/" new Dat…

Backend - Dbeaver

目录 一、说明 二、下载并安装 &#xff08;一&#xff09;官网下载 &#xff08;二&#xff09;安装 三、使用 &#xff08;一&#xff09;操作步骤 &#xff08;二&#xff09;相关问题&#xff1a;无法加载驱动类oracle.jdbc.oracledriver 1. 新建驱动 2. 再重新连接数据库 …

PyTorch2.0环境搭建

一、安装python并配置环境变量 1、打开python官网&#xff0c;下载并安装 Welcome to Python.org 下载 寻找版本&#xff1a;推荐使用3.9版本&#xff0c;或其他表中显示为安全&#xff08;security&#xff09;的版本 安装&#xff1a;&#xff08;略&#xff09; 2、配置环…

数据增强改进,实现检测目标copypaste,增加目标数据量,提升精度

🗝️YOLOv8实战宝典--星级指南:从入门到精通,您不可错过的技巧   -- 聚焦于YOLO的 最新版本, 对颈部网络改进、添加局部注意力、增加检测头部,实测涨点 💡 深入浅出YOLOv8:我的专业笔记与技术总结   -- YOLOv8轻松上手, 适用技术小白,文章代码齐全,仅需 …

python圣诞树代码编程

以下是一个简单的Python圣诞树代码&#xff1a; def draw_tree(height): for i in range(height): print( * (height - i - 1) * * (2 * i 1)) print( * (height - 1) |)draw_tree(10) 这个函数会绘制一个等腰三角形&#xff0c;其中每一行的星号数量从1开…

Java基础知识

JVM&#xff0c;JRE&#xff0c;JDK JVM 运行Java字节码的机器 JRE Java运行时环境&#xff0c;包括JVM&#xff0c;Java类库&#xff0c;运行时类库&#xff0c;国际化支持&#xff0c;安全管理器&#xff0c;启动器等 比JVM多的内容 Java类库&#xff1a;提供大量已经实…

【TiDB理论知识09】TiFlash

一 TiFlash架构 二 TiFlash 核心特性 TiFlash 主要有 异步复制、一致性、智能选择、计算加速 等几个核心特性。 1 异步复制 TiFlash 中的副本以特殊角色 (Raft Learner) 进行异步的数据复制&#xff0c;这表示当 TiFlash 节点宕机或者网络高延迟等状况发生时&#xff0c;Ti…

亿胜盈科ATR2037 无限射频前端低噪声放大器

亿胜盈科ATR2037 是一款应用于无线通信射频前端&#xff0c;工作频段为 0.7 到 6GHz 的超低噪声放大器。 ATR2037 低噪声放大器采用先进的 GaAs pHEMT 工艺设计和制作&#xff0c;ATR2037 低噪声放大器在整个工作频段内可以获得非常好的射频性能超低噪声系数。 亿胜盈科ATR203…

WGCLOUD v3.5.0 新增支持监测交换机的接口状态UP DOWN

WGCLOUD v3.5.0开始 可以监测交换机或SNMP设备的接口状态了&#xff0c;直接上图