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

最新推荐文章于 2024-04-27 13:01:21 发布
最新推荐文章于 2024-04-27 13:01:21 发布
阅读量2.6k 收藏 5
点赞数 5
文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chenzijao/article/details/128816653
版权

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

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

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

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

 

平平无奇的前端开发
关注
  • 5
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ci-demo-app-homebrew-tap:CI演示应用程序的自制方法
04-16
ci-demo-app-homebrew-tap CI演示应用程序的自制方法 安装 注册水龙头： brew tap embano1/ci-demo-app [email protected]:embano1/ci-demo-app-homebrew-tap 注意：如果您没有使用ssh设置git，您也可以使用https://github.com/embano1/ci-demo-app-homebrew-tap代替[email protected]...上面的语法。 从tap安装二进制文件： brew install embano1/ci-demo-app/demo-app 验证它是否有效： demo-app version version: 0.0.2 commit: 7fbb788 date: 2021-04-15T13:46:45Z 更新 发行新版本后，请使用以下命令更新Brew发行版
uni-app实现点赞评论功能
12-30
模拟朋友圈实时点赞及评论功能 点赞思路：点击的时候，使用push（点赞）以及slice（取消赞）方法处理数组，并且调用点赞接口 评论思路：点击的时候，写多一个评论列表，当点击发送的时候commentStatus=true，且索引等于点击的索引。同时调用获取评论列表的接口 html <view class=toolbar> <view class=timestamp>{{item.timetype}}</view> <!-- 点赞 如果islove==1，图片变为点赞的图片--> <view class=like @tap=like(index,item.id)
【掰开揉碎】深入了解 @tap 和 @click
tutututu12345678的博客
01-29 646
当我们深入了解@tap和@click，我们实际上涉及到 uni-app 中的事件绑定，以及这两个指令在底层的实现。
wepy学习基础指令
黄孝果的博客
11-28 1236
wepy学习基础 1、引入样式（以app.wpy为例） 在src目录下创建文件夹styles/base.css 在app.wpy中引入base.css样式 2、less提取css样式 &lt;style lang="less"&gt; @color: red; page { background-color: aqua; color: @color; } &lt;/style&gt; 3...
uniapp 开发APP @tap 无效
xhddwl的博客
09-02 2795
以上是正确写法 如果要是加上 native 修饰符 在浏览器运行没问题 但是打包之后就会发现@tap事件根本触发不了 修饰符一定要注意顺序以及其意义。@tap.stop.proevent="事件名"
nvue中tap.stop事件取消冒泡失效处理
qq_44749121的博客
01-10 359
【代码】nvue中tap.stop事件取消冒泡失效处理。
uniapp中的@tap和@click的区别
MJOY791270505的博客
08-16 4508
uniapp中的@tap和@click的区别
uniapp中@tap和@click的区别
热门推荐
王二哥的博客
04-02 3万+
uniapp中@tap和@click的区别 在HbuilderX中，两者都是点击时触发事件；不同的是： @click是组件被点击时触发，会有约300ms的延迟（内置处理优化了）； @tap是手指触摸离开时触发，没有300ms的延迟，但是会有事件穿透; 编译到小程序端，@click会被转换成@tap； 结尾处，欢迎交流学习，纠错。 ...
@tap和@click的区别
weixin_57633124的博客
05-04 2245
@tap和@click的区别
uni-app + vue2.0 信息提示通用组件
03-09
支持所有小程序端 + h5 + APP
uni-app实现获取验证码倒计时功能
01-22
本文实例为大家分享了uni-app实现获取验证码倒计时的具体代码，供大家参考，具体内容如下 实现的效果 页面部分是一个三目运算，codeTime是倒计时的时间。 <view class=get tap=getCheckNum()> <text>{{!...
tap-windows-9.21.2
06-16
免费下载求点赞
【uniapp/ucharts】采用 uniapp 框架的 h5 应用使用 ucharts（没有 uni_modules）
花间半盘棋
04-26 286
然后按照图片中 README 所写的方式在项目中进行导入；下载的文件是如图所示的路径；就可以正常显示图表啦。
uniapp 页面滚动到指定位置的方法
--=
04-23 392
uniapp 页面滚动到指定位置的方法
uniapp视频播放器（h5+app）
最新发布
farme_guan的博客
04-27 820
这是关于一篇在uniapp使用video视频播放器，支持自定义播放器样式，支持手势操作，选集、倍数和清晰度切换，支持SRT字幕格式。
uniapp获取当前位置及检测授权状态
Smile_ping的博客
04-26 651
uniapp App端获取当前位置、检测当前定位是否授权，并给予弹窗提示用户；
uniapp自定义国际化语言uni.chooseImage、picker组件文本错误问题
weixin_59685936的博客
04-24 327
uniapp自定义国际化语言uni.chooseImage、picker组件文本错误问题
uniapp tab切换
08-11
uniapp tab切换是指在uniapp框架中实现tab切换功能。根据引用提供的内容，可以使用三种方式来实现tab切换，具体如下： 1. 直接拆开使用（建议tab项比较少使用）：这种方式适用于tab项比较少的情况。可以在页面中直接使用多个tab标签，并通过点击不同的标签来切换内容。 2. 使用scroll-view滑动：这种方式适用于tab项较多的情况。可以将tab项放置在一个可滑动的scroll-view中，通过滑动scroll-view来切换内容。 3. scroll-view + swiper：这种方式适用于tab项较多且希望有更好的用户体验的情况。可以将tab项放置在一个可滑动的scroll-view中，并结合swiper组件来实现tab内容的切换。 根据具体的需求和场景，可以选择合适的方式来实现uniapp tab切换功能。1 #### 引用[.reference_title] - *1* [uniapp tab切换三种方式（切换内容不同情况下使用）](https://blog.csdn.net/weixin_50639421/article/details/120282635)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值