uniapp -- @tap的动态传参

最新推荐文章于 2025-06-12 14:50:37 发布
原创 最新推荐文章于 2025-06-12 14:50:37 发布 · 1.4w 阅读 · 10 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

在小程序开发中，遍历对象数组并实现点击事件时，由于@tap不支持动态传参，本文介绍了一种通过data-detail属性折中的解决方案，确保了动态参数的有效传递。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在做小程序的过程中
当遍历某一个对象数组时，我希望在点击时触发某一个事件，并向里传入当前的动态参数
但@tap并不支持动态传参，于是我采取:data-detail="item.month"的方式进行折中在这里插入图片描述
在这里插入图片描述

uniapp-推荐模块
lzping_719的专栏
10-18 617
主要实现 Tabs 交互、多 Tabs 列表分页加载数据。
uniapp - 解决高德地图获取定位当前位置出现getLocation:fail [geolocation:7]错误KEY鉴权失败，uniApp安卓app打包/云打包后高德地图调用定位API报错解决
资深程序员
10-21 7573
uni-app，高德地图，getLocation:fail[geolocation:7]，uniapp打包安卓高德地图出错，UNI-APP获取当前位置，出现getLocation:fail[geolocation:7]错误的问题解决，uniapp打包后无法获取定位的问题，uniapp云打包中出现getLocation:fail[geolocation:7]KEY错误，KEY鉴权失败，检查key绑定的sha1值与apk签名sha1值是否对应，证书没问题，打包后定位失效原因，都已经配置好了还是不行，定位A
uni-app开发 自定义底部Tap等基础使用与介绍
ou2914671339的博客
06-16 476
新手使用HbuilderX开发uni-app的一些事项 基础使用 和底部Tap的自定义与使用。uni-app支持自定义底部导航栏，通过配置pages.json及编写Vue组件，实现多页面间快速切换。简单配置，灵活定制，提升用户体验
uni-app——@tap无法动态传参解决办法
CaseyWei
04-26 9248
最近拿uni-app做小程序，发现@tap动态传参方法拿不到，于是记录一下解决办法 <view v-for="row in bannerList" :key="row.name"> <view @tap="doSomeing(row)"></view> </view> 发现点击该元素，doSomeing方法拿不到传递row参数 解决办...
uni-app 手势事件解析，uni点击方法
最新发布
m0_74245828的博客
06-12 496
click 组件被点击@longpress 长按（手指触摸超过350ms）@longtap 长按@tap 点击@touchstart 手指触摸动作开始@touchmove 手指触摸后移动@touchcancel 手指触摸被打断，如来电提醒，弹窗@touchend 手指触摸动作结束，如松开按钮​ 或 ​​ 开发中，@click和@tap都是用于处理用户点击事件，但它们有一些关键区别：在 ​​ 或 ​​ 开发中，@click和@tap。
uni-app中@tap和@click
qq_39210364的博客
09-07 593
@click有300ms的延迟，@tap为即时触发。@click为组件被点击且手指离开屏幕后才触发的，事件后，如果该元素下面还有其他元素或事件，那么这些元素或事件也会被触发。或移动端网页中，用户对点击事件的即时反馈期望很高，任何延迟都可能会影响用户的体验。在不同的平台或设备上，这两种点击事件的表现可能会有所不同。事件具有事件穿透的特性，这意味着当一个元素上绑定了。事件可能会表现得更加流畅和响应迅速。事件则是在手指触摸屏幕并离开时立即触发的。上，由于触摸屏幕的特性和优化，上，由于主要依赖鼠标操作，
uniapp使用@tap与@click的区别
qq_45796592的博客
05-04 3627
tap与click事件的区别
uniapp中的页面跳转及传参
sslcsq的博客
09-18 1646
一 @tap事件跳转 在想要跳转的位置添加事件@click=“方法名” methods: { jump() { uni.navigateTo({ url:"../my/my" }) } } 五种跳转方法： uni.navigateTo 保留当前页面，跳转到应用内的某个页面 //一般用于需要返回 uni.redirectTo 关闭当前页面，跳转到应用内的某个页面。 uni.reLaunch 关闭所有页面，打开到应用内的某个页面。 uni.switchTab
uniapp - 解决报错 canvasToTempFilePath: fail canvas is empty 画布为空错误，生成海报相册、二维码、条码、裁剪/拼合操作图片报错，加了this还是报错
资深程序员
07-20 4021
uni-app，h5移动端网页，微信小程序，支付宝小程序，Android安卓，苹果ios，app，nvue，canvasToTempFilePath:失败画布为空，报错，canvasToTempFilePath:failcanvasisempty，不支持2d，还是报错，this，加上this还是报错，vue3没有this怎么办？海报，保存到手机相册，生成二维码，显示条码，图像裁切，图片处理，canvas报错，无法解决，还是fail，依然报错，传了this也不好使，Uniapp小程序，如何解决这个问题
uniapp - 订单模块
lzping_719的专栏
10-22 1230
订单模块页面较多，建议用新的分包文件夹独立管理订单模块页面：填写订单页，支付订单页，订单详情页，订单列表页。 填写订单页 小兔鲜儿项目有三种方式可以生成订单信息，分别是：购物车结算、立即购买、再次购买。 静态结构 <script setup lang="ts"> import { computed, ref } from 'vue' // 获取屏幕边界到安全区域距离 const { safeAreaInsets } = uni.getSystemInfoSync() // 订单备注 cons
uni-app如何页面传参数的几种方法总结
10-15
在实际开发中，`uni.$emit()`和`uni.$on()`的组合可以用于动态更新页面内容。比如，当你使用自定义组件替代系统Tabbar，而某个页面（如微信支付成功页）需要回到Tabbar页面并刷新内容时，常规的页面生命周期方法可能...
uniapp中@tap和@click的区别
热门推荐
王二哥的博客
04-02 4万+
uniapp中@tap和@click的区别 在HbuilderX中，两者都是点击时触发事件；不同的是： @click是组件被点击时触发，会有约300ms的延迟（内置处理优化了）； @tap是手指触摸离开时触发，没有300ms的延迟，但是会有事件穿透; 编译到小程序端，@click会被转换成@tap； 结尾处，欢迎交流学习，纠错。 ...
uniapp中的@tap和@click的区别
MJOY791270505的博客
08-16 4671
uniapp中的@tap和@click的区别
uniapp页面参数传递
糖果云专栏
12-02 3007
uni-app有两种路由跳转方式：使用navigator组件跳转、调用API跳转 1、 <navigator :url="'../info/info?newsid='+item"></navigator> 2、 <view @tap="openinfo"><view> methods:{ openinfo(e){ va...
uniapp中@tap和@click区别
不想写代码的一天
07-17 570
原文： https://blog.youkuaiyun.com/xulihua_75/article/details/125951020。@click是点击触发事件，会有约300ms的延迟；@tap是手指触摸离开时触发，没有300ms的延迟。不用想太多，把@tap当做@click用就行。
uniapp中的@tap与@click：点击事件的微妙差异
g470641382的博客
12-07 1038
uniapp中的@tap与@click：点击事件的微妙差异
记一次奇葩的错误，uniapp @tap点击失效
R-青
05-22 677
先说问题原因，css 中使用了卡片翻转效果，backface-visibility: hidden;这行导致正面元素能看到，但是点击失效了。移除掉这行就好了。
【uniapp】中@tap与@click的区别
ONLYSRY的博客
08-02 959
tap是手指触摸离开时触发，没有300ms的延迟，但是会有事件穿透。click是组件被点击时触发，会有约300ms的延迟内置处理优化了。编译到小程序端，@click会被转换成@tap。
uniapp scroll-view scroll-into-view 设置currentTarget的id
03-15
同时，注意在UniApp中事件绑定的语法可能与原生小程序略有不同，比如使用@click而不是bindtap，但实际测试发现UniApp中可能需要使用@tap，同时注意在方法中访问this上下文的问题，可能需要使用箭头函数或在methods中...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值