在使用uni-app开发小程序时@tap和click的区别

最新推荐文章于 2025-04-24 17:14:48 发布
最新推荐文章于 2025-04-24 17:14:48 发布
阅读量3k 收藏 6
点赞数 6
CC 4.0 BY-SA版权
文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/chenzijao/article/details/128816653

在HbuilderX中，两者都是点击时触发事件；不同的是：

  1. @click是组件被点击时触发，会有约300ms的延迟（内置处理优化了）；
  2. @tap是手指触摸离开时触发，没有300ms的延迟，但是会有事件穿透;
  3. 编译到小程序端，@click会被转换成@tap；

如何使用@tap.stop阻止事件继续传播

@tap.stop="事件名" 不能只在当前标签添加 也需要在外层标签同样使用@tap.stop="事件名"

 

uni-app - 小程序使用高德地图完整版
King Saj
04-30 581
页面自动通过定位获取用户位置并展示周边POI数据，同时支持关键词输入实时联想推荐关联地点信息，实现精准智能的地点发现与检索功能。
Uni-app跨平台开发
2301_78827988的博客
06-22 876
Uni-app是一种跨平台的移动应用程序开发框架，可以使开发者使用相同的代码同时构建iOS和Android应用程序。以下是几个Uni-app跨平台开发的优点：统一原生组件：Uni-app使用Vue.js框架开发，它提供了一套统一的原生组件，可以被不同的平台识别和使用。这使得开发人员无需学习多种不同的原生开发语言和框架，大大降低了开发应用程序的门槛。自适应屏幕：Uni-app可以根据不同设备的分辨率和屏幕大小进行自适应，确保应用程序在不同平台上的兼容性。
@tap和@click区别
最新发布
小妖666个人笔记
04-24 308
@tap和@click区别
【掰开揉碎】深入了解 @tap 和 @click
tutututu12345678的博客
01-29 2346
当我们深入了解@tap和@click，我们实际上涉及到 uni-app 中的事件绑定，以及这两个指令在底层的实现。
uniapp中的@tap和@click的区别
qq_44776454的博客
07-03 8913
1.click事件是PC端的常用的单击事件，但是当这个事件在移动端实现的时候，会出现延迟300ms的现象，所以移动端一般用tap来代替click。@click是组件被点击时触发，会有约300ms的延迟(内置处理优化了)。2.@tap是手指触摸离开时触发，没有300ms的延迟，减少click在移动端的延迟，提高了性能。3.编译到小程序端，@click会被转成@tap。
uniapp中@tap和@click的区别
热门推荐
王二哥的博客
04-02 4万+
uniapp中@tap和@click的区别 在HbuilderX中，两者都是点击时触发事件；不同的是： @click是组件被点击时触发，会有约300ms的延迟（内置处理优化了）； @tap是手指触摸离开时触发，没有300ms的延迟，但是会有事件穿透; 编译到小程序端，@click会被转换成@tap； 结尾处，欢迎交流学习，纠错。 ...
基于uni-app的微信小程序Map事件穿透处理
小王的技术库
08-31 3797
这里只提供一下我的思路，目前来讲虽然实现了效果，但是不太好用。第一个问题就是需要人为设定执行优先级，就不太友好，最好是能通过dom层级来生成这个优先级，但是在uniapp或者说小程序环境中获取dom一直都不太好用。第二个问题就是这里是通过定时器进行延时，多少还是有点不稳定，比如两个事件触发超过100ms了就拉胯了，虽然正常情况下这种点击事件的穿透不会超过100ms，但是依然是有风险的。本身是React栈，业务需要才来维护这个uniapp的项目，并不是很熟悉uniapp的生态。...
uni-app @tap
01-07
### uni-app 中 `@tap` 指令的使用方法 在uni-app框架内，事件绑定采用类似于Vue.js的方式。对于处理点击事件而言，可以利用`v-on:click`或简写的`@tap`来实现[^1]。 #### 基本语法结构 当元素被点击触发时执行...
uniapp使用@tap与@click的区别
qq_45796592的博客
05-04 3617
tap与click事件的区别
uni-app中@tap和@click
qq_39210364的博客
09-07 575
@click有300ms的延迟，@tap为即时触发。@click为组件被点击且手指离开屏幕后才触发的，事件后，如果该元素下面还有其他元素或事件，那么这些元素或事件也会被触发。或移动端网页中，用户对点击事件的即时反馈期望很高，任何延迟都可能会影响用户的体验。在不同的平台或设备上，这两种点击事件的表现可能会有所不同。事件具有事件穿透的特性，这意味着当一个元素上绑定了。事件可能会表现得更加流畅和响应迅速。事件则是在手指触摸屏幕并离开时立即触发的。上，由于触摸屏幕的特性和优化，上，由于主要依赖鼠标操作，
@tap和@click的区别
weixin_57633124的博客
05-04 2611
@tap和@click的区别
@tap与@click的区别
没化妆，别看
05-06 7575
@tap与@click的区别 tap和click都是点击事件。不过移动端有太多复杂的功能是click监听不到的，例如，触摸、按住和轻滑。这时候就要用tap方法了。 另外，click事件是点击放开之后才触发的，所以时间上会有延迟，大概200-300ms，可是我们在移动端的话就比较追求速度，所以就不能出现说有延迟的情况。所以用tap来代替click事件的话，对于针对移动设备的产品都适合。 而且，tap还有一个特点就是事件穿透，就是你执行完绑定的tap事件之后呢，如果下面如果绑定了其他事件或者是本身就存在点击事件
【uniapp】中@tap与@click的区别
ONLYSRY的博客
08-02 956
tap是手指触摸离开时触发，没有300ms的延迟，但是会有事件穿透。click是组件被点击时触发，会有约300ms的延迟内置处理优化了。编译到小程序端，@click会被转换成@tap。
@tap vs @click
A_bad_horse的专栏
02-08 305
@tap与@click的区别？ - @click 组件被点击时触发，@tap手指触摸后马上离开。 uni-app 中都是 click，至于点击延迟的问题会内置处理优化。 编译到小程序时，click 会转换为 tap，开发人员无需处理这些。 ...
<view v-show="sele0_index==index" class="listActive"> <view class="view3" :class="sele1_index==index1?'view3_s':''" v-for="(item1,index1) in item.ar" :key="index1" @tap.stop="sele1btn(item1,index1)"> <image v-if="sele1_index==index1" :src="item1.imgyes" mode=""></image> <image v-else :src="item1.imgno" mode=""></image> <view class=""> {{item1.name}} </view> </view> </view> uniapp像这个的数组 怎么让它不一下子显示出来 慢慢一个一个显现呢
03-26
<think>嗯，用户的问题是关于在UniApp中如何让一个数组的元素逐个显示，而不是一次性全部展现。首先，我需要理解用户提供的代码结构。看起来他们正在使用v-for循环渲染一个列表，每个项目是item.ar中的元素。用户希望这些项目能够逐个出现，可能是为了动画效果或提升用户体验。 接下来，我需要考虑在UniApp中实现这种效果的方法。UniApp基于Vue.js，所以Vue的动画和过渡机制应该适用。常见的做法可能是使用CSS动画或者Vue的过渡组件。另外，可能还需要利用v-show或v-if来控制每个元素的显示时机，结合JavaScript的定时器来逐个触发显示。 用户可能已经尝试过直接渲染，但所有元素同时出现，所以需要找到控制每个元素显示时间的方法。可能的步骤包括：为每个元素添加动态的样式类，通过数据属性控制显示，或者使用setInterval或setTimeout来逐步改变显示状态。 另一个考虑点是性能问题，尤其是在移动端。过多的定时器或频繁的DOM操作可能导致卡顿，所以需要优化。比如，使用CSS动画而不是JavaScript操作，或者确保定时器在组件销毁时被清除以避免内存泄漏。 还需要注意用户代码中的现有结构，他们已经在使用v-for循环，并且有sele1_index和index1来判断是否激活某个元素。可能需要将动画逻辑整合到现有的数据结构和事件处理中，比如在点击事件时触发动画，或者在数据加载时逐步显示。 可能还需要处理用户交互，比如当元素正在逐个显示时，用户点击了某个元素，是否需要暂停动画或者如何处理。不过根据用户的问题描述，可能只需要初始加载时的逐个显示，而不涉及交互中的动态变化。 最后，可能需要提供两种方法：一种使用纯CSS动画，通过延迟实现逐个显示；另一种使用JavaScript定时器动态控制显示。这样用户可以根据具体需求选择合适的方法。同时，要确保代码示例正确，语法符合UniApp和Vue的要求，比如正确使用绑定类名、处理响应式数据变化等。</think>在UniApp中实现逐条显示效果，可以通过以下两种方式实现（以你提供的列表结构为例）： --- ### **方法一：CSS动画实现（推荐）** ```vue <view v-show="sele0_index==index" class="listActive"> <view v-for="(item1,index1) in item.ar" :class="['view3', {'view3_s': sele1_index==index1}, 'delay-' + index1]" @tap.stop="sele1btn(item1,index1)" :key="index1"> <!-- 内容保持不变 --> </view> </view> <style> /* 基础样式 */ .view3 { opacity: 0; transform: translateY(20px); transition: all 0.5s ease; } /* 延迟类 */ .delay-0 { transition-delay: 0.1s; } .delay-1 { transition-delay: 0.2s; } .delay-2 { transition-delay: 0.3s; } /* ...根据实际数量扩展 */ /* 父级激活时触发动画 */ .listActive .view3 { opacity: 1; transform: translateY(0); } </style> ``` **原理说明**： 1. 通过`opacity`和`transform`实现入场动画 2. 利用`transition-delay`实现逐个延迟 3. 当父容器显示时（`v-show`触发）启动动画 --- ### **方法二：数据驱动实现** ```vue <script> export default { data() { return { showItems: [] // 用于存储逐步显示的项 } }, methods: { loadItems() { this.item.ar.forEach((item, index) => { setTimeout(() => { this.$set(this.showItems, index, true) }, index * 200) // 间隔200ms }) } } } </script> <view v-show="sele0_index==index" class="listActive"> <view v-for="(item1,index1) in item.ar" v-show="showItems[index1]" :class="['view3', {'view3_s': sele1_index==index1}]" @tap.stop="sele1btn(item1,index1)" :key="index1"> <!-- 内容保持不变 --> </view> </view> ``` --- ### **增强方案：结合动画库** 推荐使用[animate.css](https://animate.style/)库： ```vue <view v-for="(item1,index1) in item.ar" class="animate__animated" :class="{ 'animate__fadeInUp': showItems[index1], 'delay-'+index1: showItems[index1] }"> ``` --- **注意事项**： 1. 性能优化：移动端建议使用CSS动画而非JavaScript动画 2. 过渡时间：建议单次动画时长控制在300ms以内 3. 内存管理：组件销毁时需要清除定时器 4. 兼容性：需要测试不同平台的动画表现 两种方案均可实现逐条显示效果，CSS方案性能更优，数据驱动方案更灵活。可根据实际项目需求选择实现方式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值