uniapp -- @tap的动态传参

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

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

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

uniapp-推荐模块
lzping_719的专栏
10-18 641
主要实现 Tabs 交互、多 Tabs 列表分页加载数据。
uniapp - 解决高德地图获取定位当前位置出现getLocation:fail [geolocation:7]错误KEY鉴权失败，uniApp安卓app打包/云打包后高德地图调用定位API报错解决
🏆 前端领域优质创作者
10-21 7990
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 550
新手使用HbuilderX开发uni-app的一些事项 基础使用 和底部Tap的自定义与使用。uni-app支持自定义底部导航栏，通过配置pages.json及编写Vue组件，实现多页面间快速切换。简单配置，灵活定制，提升用户体验
uniapp中的页面跳转及传参
sslcsq的博客
09-18 1693
一 @tap事件跳转 在想要跳转的位置添加事件@click=“方法名” methods: { jump() { uni.navigateTo({ url:"../my/my" }) } } 五种跳转方法： uni.navigateTo 保留当前页面，跳转到应用内的某个页面 //一般用于需要返回 uni.redirectTo 关闭当前页面，跳转到应用内的某个页面。 uni.reLaunch 关闭所有页面，打开到应用内的某个页面。 uni.switchTab
【uniapp】跨端开发问题记录
lorogy的博客
08-09 1351
uni-app跨端开发
uni-app——@tap无法动态传参解决办法
CaseyWei
04-26 9306
最近拿uni-app做小程序，发现@tap动态传参方法拿不到，于是记录一下解决办法 <view v-for="row in bannerList" :key="row.name"> <view @tap="doSomeing(row)"></view> </view> 发现点击该元素，doSomeing方法拿不到传递row参数 解决办...
uni-app中@tap和@click
qq_39210364的博客
09-07 679
@click有300ms的延迟，@tap为即时触发。@click为组件被点击且手指离开屏幕后才触发的，事件后，如果该元素下面还有其他元素或事件，那么这些元素或事件也会被触发。或移动端网页中，用户对点击事件的即时反馈期望很高，任何延迟都可能会影响用户的体验。在不同的平台或设备上，这两种点击事件的表现可能会有所不同。事件具有事件穿透的特性，这意味着当一个元素上绑定了。事件可能会表现得更加流畅和响应迅速。事件则是在手指触摸屏幕并离开时立即触发的。上，由于触摸屏幕的特性和优化，上，由于主要依赖鼠标操作，
uniapp-页面之间传值和标签反向传值
qq_41751237的博客
05-10 1467
之前开发了一款蓝牙工具，本想着使用android原生开发，无意间发现uniapp也可以进行底层开发，结果一系列踩坑开始，几次尝试后，终于没有问题了，今天总结下我用到的页面传值。 一、子标签回传数据： 在开发过程中，我们的代码最好能够实现低耦合，也就是说，页面和子标签之间不要过于依赖，这样既能够实现底层代码复用，也让单个界面干净不少，举个例子： 我们写了一个界面，里面有列表，而且这些列表元素样式很复杂，那么我们就应该单一的写一个列表元素样式，让后在本界面里面复用，但是，子标签里面的值如何回传呢，代码： 子标签
uniapp使用@tap与@click的区别
qq_45796592的博客
05-04 3756
tap与click事件的区别
uniapp中@tap和@click的区别
热门推荐
王二哥的博客
04-02 4万+
uniapp中@tap和@click的区别 在HbuilderX中，两者都是点击时触发事件；不同的是： @click是组件被点击时触发，会有约300ms的延迟（内置处理优化了）； @tap是手指触摸离开时触发，没有300ms的延迟，但是会有事件穿透; 编译到小程序端，@click会被转换成@tap； 结尾处，欢迎交流学习，纠错。 ...
uni-app如何页面传参数的几种方法总结
10-15
主要介绍了uni-app如何页面传参数的几种方法总结,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
uniapp中的@tap和@click的区别
MJOY791270505的博客
08-16 4709
uniapp中的@tap和@click的区别
uniapp页面参数传递
糖果云专栏
12-02 3049
uni-app有两种路由跳转方式：使用navigator组件跳转、调用API跳转 1、 <navigator :url="'../info/info?newsid='+item"></navigator> 2、 <view @tap="openinfo"><view> methods:{ openinfo(e){ va...
uni-app @tap 失效
lifs419的博客
03-23 5604
item-menu 自定义组件， <item-menu :param="serviceTel" @tap="makeCall()"/> tap事件在小程序正常，但是H5和原生点击无效 <view @tap="makeCall()"> <item-menu :param="serviceTel" /> </view> 再包裹一层view 即可解决 记录一下，后面再看根源.....
uniapp中@tap和@click区别
努力、拼搏、奋进
07-23 3092
uniapp中@tap和@click区别
uniapp中的@tap与@click：点击事件的微妙差异
g470641382的博客
12-07 1291
uniapp中的@tap与@click：点击事件的微妙差异
记一次奇葩的错误，uniapp @tap点击失效
R-青
05-22 910
先说问题原因，css 中使用了卡片翻转效果，backface-visibility: hidden;这行导致正面元素能看到，但是点击失效了。移除掉这行就好了。
uniapp @click @change有什么区别
最新发布
09-14
在Uniapp中，`@click`和`@change`是两种不同类型的事件，有着明显的区别： ### 触发场景 - **`@click`**：主要用于处理用户的点击操作，当用户点击某个元素时触发，适用于各种可点击的元素，如按钮、链接等。例如，在一个按钮上绑定`@click`事件，当用户点击该按钮时，对应的事件处理函数就会被执行。 - **`@change`**：通常用于表单元素，当表单元素的值发生改变且完成交互时触发。比如输入框内容改变、下拉框选项切换、复选框或单选框状态改变等情况。在Sard - Uniapp项目中，Tabs组件的`@change`事件按常规逻辑应在用户主动切换标签页时触发，但可能会出现页面首次加载就自动触发的问题 [^1]。 ### 事件映射 在Uniapp的事件映射表中，`click`映射为`tap`，而`change`仍对应`change`。这表明在Uniapp的事件体系里，`@click`本质上相当于`@tap`，是与点击操作对应的事件；而`@change`专门用于处理表单元素值改变的情况 [^2]。 ### 传参及使用场景示例 在传参方面，以示例来看，`@click`事件可以方便地传递额外参数，如`<div @click="changeShip(biz_id)">`，通过这种方式可以将`biz_id`传递给`changeShip`函数进行处理。而`@change`事件一般是获取表单元素改变后的值，如`ShipRadioChange (e)`函数中，通过`e.detail.value`获取改变后的值进行相应操作 [^3]。 ### 事件冒泡处理 在处理事件冒泡时，两者也有所不同。对于需要阻止`@change`事件冒泡的情况，可给需要`change`的标签父级元素加上`@tap.stop.prevent`，如`<view class="checkbox_class_right" @tap.stop.prevent>`，用于防止事件冒泡到父元素。而对于`@click`事件的冒泡处理，则需要根据具体需求使用`@click.stop`等修饰符来阻止 [^4]。 ### 代码示例 ```vue <template> <view> <!-- click事件示例 --> <button @click="handleClick">点击我</button> <!-- change事件示例 --> <input type="text" @change="handleChange" /> </view> </template> <script> export default { methods: { handleClick() { console.log('按钮被点击了'); }, handleChange(e) { console.log('输入框内容改变了，新值为：', e.detail.value); } } } </script> ```
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值