uni-app中@tap和@click的区别

最新推荐文章于 2024-09-07 19:24:36 发布
最新推荐文章于 2024-09-07 19:24:36 发布
阅读量1.1k 收藏
点赞数
分类专栏： 小程序 文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shi15926lei/article/details/130144324
版权
tap和click在点击事件上有区别，tap适用于移动端的触摸交互，无300ms延迟但可能有穿透问题；而click在某些Vue的v-on修饰符下必需，且存在300ms延迟。在微信小程序中，tap不总能映射为click。
摘要由CSDN通过智能技术生成

tap和click都是点击事件。不过移动端有太多复杂的功能是click监听不到的，例如，触摸、按住和轻滑。这时候就要用tap方法了。

1.Vue的v-on修饰符中有部分只能由@click触发，如.once  .capture  .native；

2.@click是组件被点击时触发，会有约300ms的延迟（内置处理优化了）；

   @tap是手指触摸离开时触发，没有300ms的延迟，但是会有事件穿透;

3.微信小程序开发过程中，部分场景@tap无法被自动编译成@click触发

 

@tap和@click的区别_&计算属性---uview工作笔记001
添柴程序猿的专栏
03-17 3693
我们现在做app,使用基于uviewui前端框架的这个ui框架 uviewui是基于vue的,由于前端薄弱,发现了使用中的问题,及时记录下来. https://www.uviewui.com/components/layout.html <button @tap="submit" :style="[inputStyle]" class="loginBtn">登录</button> @tap 和@click的功能是一样的.@tap是zepto.js提供的可以去查一下. .
【掰开揉碎】深入了解 @tap 和 @click
tutututu12345678的博客
01-29 1919
当我们深入了解@tap和@click，我们实际上涉及到 uni-app 中的事件绑定，以及这两个指令在底层的实现。
uniapp中的@tap和@click的区别
qq_44776454的博客
07-03 7521
1.click事件是PC端的常用的单击事件，但是当这个事件在移动端实现的时候，会出现延迟300ms的现象，所以移动端一般用tap来代替click。@click是组件被点击时触发，会有约300ms的延迟(内置处理优化了)。2.@tap是手指触摸离开时触发，没有300ms的延迟，减少click在移动端的延迟，提高了性能。3.编译到小程序端，@click会被转成@tap。
uni-app中@tap和@click
最新发布
qq_39210364的博客
09-07 331
@click有300ms的延迟，@tap为即时触发。@click为组件被点击且手指离开屏幕后才触发的，事件后，如果该元素下面还有其他元素或事件，那么这些元素或事件也会被触发。或移动端网页中，用户对点击事件的即时反馈期望很高，任何延迟都可能会影响用户的体验。在不同的平台或设备上，这两种点击事件的表现可能会有所不同。事件具有事件穿透的特性，这意味着当一个元素上绑定了。事件可能会表现得更加流畅和响应迅速。事件则是在手指触摸屏幕并离开时立即触发的。上，由于触摸屏幕的特性和优化，上，由于主要依赖鼠标操作，
uniapp@tab和@click的区别
Frank_colo的博客
01-16 529
了解移动端uniapp中,tap和click的区别
爬楼梯的前端小白的博客
04-13 4221
tap和click都是点击事件。不过移动端有太多复杂的功能是click监听不到的，例如，触摸、按住和轻滑。这时候就要用tap方法了。另外，click事假是点击放开之后才触发的，所以时间上会有延迟，大概200-300ms这样，可是我们在移动端的话就比较追求速度，所以就不能出现说有延迟的情况。所以用tap来代替click事件的话，对于针对移动设备的产品都适合。而且，tap还有一个特点就是『事件穿透』，就是你执行完绑定的tap事件之后呢，如果下面如果绑定了其他事件或者是本身就存在点子事件的话，也会默认触发。 ..
uni-app里@click.native是什么事件
05-24
@click.native是uni-app中的一个自定义事件，它可以用于在组件上绑定原生的点击事件（tap）。当用户点击组件时，会触发@click.native事件，并执行绑定的方法。与@click事件不同的是，@click.native事件绑定的方法会...
Uni-app跨平台开发
2301_78827988的博客
06-22 821
Uni-app是一种跨平台的移动应用程序开发框架，可以使开发者使用相同的代码同时构建iOS和Android应用程序。以下是几个Uni-app跨平台开发的优点：统一原生组件：Uni-app使用Vue.js框架开发，它提供了一套统一的原生组件，可以被不同的平台识别和使用。这使得开发人员无需学习多种不同的原生开发语言和框架，大大降低了开发应用程序的门槛。自适应屏幕：Uni-app可以根据不同设备的分辨率和屏幕大小进行自适应，确保应用程序在不同平台上的兼容性。
Vue3 + Ts + Pinia + uni-app 学习笔记
qq_33365152的博客
09-13 668
Vue3 +Ts + Pinia + uni-app 学习笔记
vue移动端解决click延迟，封装tap，滑动等多个移动端事件js
04-26
移动端点击click事件会有300ms的延迟，而vue没有封装js的移动端tap事件，使用时，页面引用[removed][removed]，通过<li v-tap="{fn:vueTouch,active:0}">全部</li> fn：vueTouch调用。
uni-app如何页面传参数的几种方法总结
10-15
本文将详细介绍uni-app页面传参数的几种方法，特别关注`uni.$emit()`和`uni.$on()`的使用，以及它们在实际开发中的应用场景。 首先，`uni.$emit(eventName, OBJECT)`是用来触发全局的自定义事件。你可以向事件中...
uniapp使用@tap与@click的区别
qq_45796592的博客
05-04 3416
tap与click事件的区别
uniapp中@tap和@click的区别
热门推荐
王二哥的博客
04-02 4万+
uniapp中@tap和@click的区别 在HbuilderX中，两者都是点击时触发事件；不同的是： @click是组件被点击时触发，会有约300ms的延迟（内置处理优化了）； @tap是手指触摸离开时触发，没有300ms的延迟，但是会有事件穿透; 编译到小程序端，@click会被转换成@tap； 结尾处，欢迎交流学习，纠错。 ...
uniapp中@click或者@tap多层嵌套的问题解决方法
知码客
07-25 879
我们在开发页面的过程中。例如要设计一个九宫格的相册，并且加上删除上传图片和点击图片后预览图片大图的功能例如下图的演示功能。通过上面我们可以看到我们涉及到了两个点击的操作调用了不同的方法，就会遇到一个问题就是点击外围。号后要删除掉当前的图片，那么我们设计的时候如果我们代码写成如下的格式。这个仅仅是我自己的一个笔记整体九宫格实现的代码后续整理再发布。是不生效的，那么我们处理的方式很简单。点击图片后显示大图预览图片，点击。
微信小程序之点击事件
m0_59704905的博客
04-18 3830
微信小程序中常用的点击事件主要是tap，但除此之外还有其他的触摸类事件，用于不同的交互场景。
uni-app开发 自定义底部Tap等基础使用与介绍
ou2914671339的博客
06-16 339
新手使用HbuilderX开发uni-app的一些事项 基础使用 和底部Tap的自定义与使用。uni-app支持自定义底部导航栏，通过配置pages.json及编写Vue组件，实现多页面间快速切换。简单配置，灵活定制，提升用户体验
生成微信小程序滑动Tap标签页
06-08
下面是一个简单的微信小程序滑动Tap标签页的实现示例： 1. 在`app.json`中设置`tabBar`属性，用于定义底部标签栏的样式和内容。例如： ``` "tabBar": { "color": "#999999", "selectedColor": "#007aff", "backgroundColor": "#ffffff", "borderStyle": "black", "list": [ { "pagePath": "pages/index/index", "text": "首页" }, { "pagePath": "pages/category/category", "text": "分类" }, { "pagePath": "pages/cart/cart", "text": "购物车" }, { "pagePath": "pages/user/user", "text": "个人中心" } ] } ``` 2. 在`pages`目录下创建对应的页面文件，例如`index`、`category`、`cart`和`user`，并在每个页面的`wxml`文件中定义一个`scroll-view`组件和一个`swiper`组件。例如： ```html <!-- index.wxml --> <scroll-view class="tab-scroll-view" scroll-x="true"> <swiper class="tab-swiper" current="{{current}}" bindchange="swiperChange"> <swiper-item> <view>标签页1</view> </swiper-item> <swiper-item> <view>标签页2</view> </swiper-item> <swiper-item> <view>标签页3</view> </swiper-item> </swiper> </scroll-view> ``` ```html <!-- category.wxml --> <scroll-view class="tab-scroll-view" scroll-x="true"> <swiper class="tab-swiper" current="{{current}}" bindchange="swiperChange"> <swiper-item> <view>标签页1</view> </swiper-item> <swiper-item> <view>标签页2</view> </swiper-item> <swiper-item> <view>标签页3</view> </swiper-item> </swiper> </scroll-view> ``` ```html <!-- cart.wxml --> <scroll-view class="tab-scroll-view" scroll-x="true"> <swiper class="tab-swiper" current="{{current}}" bindchange="swiperChange"> <swiper-item> <view>标签页1</view> </swiper-item> <swiper-item> <view>标签页2</view> </swiper-item> <swiper-item> <view>标签页3</view> </swiper-item> </swiper> </scroll-view> ``` ```html <!-- user.wxml --> <scroll-view class="tab-scroll-view" scroll-x="true"> <swiper class="tab-swiper" current="{{current}}" bindchange="swiperChange"> <swiper-item> <view>标签页1</view> </swiper-item> <swiper-item> <view>标签页2</view> </swiper-item> <swiper-item> <view>标签页3</view> </swiper-item> </swiper> </scroll-view> ``` 3. 在每个页面的`js`文件中定义`current`属性和`swiperChange`方法，用于控制当前显示的标签页。例如： ```javascript // index.js Page({ data: { current: 0 }, swiperChange: function(e) { this.setData({ current: e.detail.current }) } }) ``` ```javascript // category.js Page({ data: { current: 0 }, swiperChange: function(e) { this.setData({ current: e.detail.current }) } }) ``` ```javascript // cart.js Page({ data: { current: 0 }, swiperChange: function(e) { this.setData({ current: e.detail.current }) } }) ``` ```javascript // user.js Page({ data: { current: 0 }, swiperChange: function(e) { this.setData({ current: e.detail.current }) } }) ``` 4. 在`app.wxss`中定义`tab-scroll-view`和`tab-swiper`的样式，用于控制标签栏和标签页的显示。例如： ```css .tab-scroll-view { height: 44rpx; white-space: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; } .tab-swiper { width: 100%; height: 100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch; } ``` 这样就完成了微信小程序滑动Tap标签页的实现。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值