@tap和@click的区别_&计算属性---uview工作笔记001

最新推荐文章于 2024-05-13 10:38:32 发布
最新推荐文章于 2024-05-13 10:38:32 发布
阅读量3.6k 收藏 1
点赞数 2
分类专栏： 前端UI&后端&分布式
本文为博主原创文章，未经博主 添柴程序猿 允许不得转载 违者追究法律责任。
本文链接：https://blog.csdn.net/lidew521/article/details/114918545
版权
本文介绍了在uviewUI框架下，@tap和@click事件的区别。@tap是针对移动端优化的点击事件，无200-300ms延迟，且存在事件穿透现象。同时，文章还提及了计算属性在Vue中的应用，展示了如何根据条件动态设置按钮样式。
摘要由CSDN通过智能技术生成

我们现在做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是zepto.js库的点击时间和click类似，zepto.js是一个比较轻量级的Jquary库，随着现在移动端的火爆越来越多的h5都支持移动端的方向。

所以zepto.js是针对移动端设计的高级JS浏览器库。为什么不能用Jquary呢，是因为移动端的手机操作太多了而pc端没有的。

比如说：触摸、按住和轻滑。移动端浏览器也没有pc端的双击。所以开发移动端页面就取向于用zepto.js库。

使用zepto.js也是像使用Jquary一样，需要引用文件。不过他更趋向于vue.js，喜欢把不同功能的封装到不同的模块中。

这样做的好处是更轻量更瘦身。你需要哪个模块就引用哪个模块。如果你

了解本专栏 订阅专栏 解锁全文 超级会员免费看
添柴程序猿
关注
专栏目录
订阅专栏
tap 和click 事件区别
此博客停止维护和更新，已转移https://github.com/ilvseyinfu/blog
09-10 2万+
之前考三七互娱时遇到的问题，今天回顾记录下。 首先说下题目：clike事件和 Zepto.js 中tap的区别  首先介绍下Zepto： 最初是作为移动端开发的库，但是却可以作为JQuery轻量级的替代品，因为API和JQuery相似，而文件更小。 介绍下tap和click的区别： 两者都会在点击时触发，但是在web手机端，clikc会有200-300ms的延时，所以要用tap代替cli
uni-app中@tap和@click的区别
shi15926lei的博客
04-14 1065
tap和click都是点击事件。不过移动端有太多复杂的功能是click监听不到的，例如，触摸、按住和轻滑。这时候就要用tap方法了。1.Vue的v-on修饰符中有部分只能由@click触发，如.once .capture .native；2.@click是组件被点击时触发，会有约300ms的延迟（内置处理优化了）；@tap是手指触摸离开时触发，没有300ms的延迟，但是会有事件穿透;3.微信小程序开发过程中，部分场景@tap无法被自动编译成@click触发。
【掰开揉碎】深入了解 @tap 和 @click
tutututu12345678的博客
01-29 1767
当我们深入了解@tap和@click，我们实际上涉及到 uni-app 中的事件绑定，以及这两个指令在底层的实现。
@tap是什么
weixin_49393290的博客
11-25 884
详情见这个介绍 @tap是什么？和@click的区别-srcmini
vue @click @tap 重叠 事件区分
sam的博客
03-15 8110
点击 remove 事件会触发 details 事件,使用@click.stop 官方介绍 &lt;ul&gt; &lt;li v-for="item in data.list" :key="item.id" @click="details(item)"&gt; &lt;font @click.stop="edit(item)"&gt;编辑&lt;/font&
vue移动端解决click延迟，封装tap，滑动等多个移动端事件js
04-26
移动端点击click事件会有300ms的延迟，而vue没有封装js的移动端tap事件，使用时，页面引用[removed][removed]，通过<li v-tap="{fn:vueTouch,active:0}">全部</li> fn：vueTouch调用。
@tap和@click区别
m0_62600503的博客
01-24 1335
都是点击事件，但它们在延迟等方面上有所不同。在移动端开发中，如果追求更快的响应速度，建议使用。事件通常用于移动端，因为它能够更好地适应移动设备的快速响应需求。都是用于处理点击事件的，但它们之间存在一些差异。选择哪一个取决于具体的应用场景和性能要求。而在不特别要求即时响应的情况下，可以使用。事件则更常见于传统的网页开发中。
PyPI 官网下载 | tap_test_data_generator-1.1.0-py3-none-any.whl
02-07
**PyPI 官网下载 | tap_test_data_generator-1.1.0-py3-none-any.whl** 在Python开发中，PyPI（Python Package Index）是官方的第三方Python软件包仓库，开发者可以在这里发布和分享自己的模块、库和其他工具。`tap...
PyPI 官网下载 | pipelinewise_tap_snowflake-1.1.1-py3-none-any.whl
02-05
《PyPI官网下载与pipelinewise_tap_snowflake-1.1.1-py3-none-any.whl的使用详解》 在Python的世界里，PyPI（Python Package Index）是官方的第三方软件包仓库，它提供了丰富的Python库，使得开发者能够方便地分享...
vue的tap手势插件
08-09
vue的tap手势插件
vue自定义tap指令及tap事件的实现
10-18
Vue提供自定义实现指令的功能, 和组件类似,可以是全局指令和局部指令,这篇文章主要介绍了vue自定义tap指令及tap事件的实现 ,需要的朋友可以参考下
@tap="rightTep('{{id}}')" wepy中的事件传值
beichen3997的博客
04-09 1389
<view class='right' @tap="rightTep('{{id}}')">费报制单 </view> methods = { nextTep () { if (this.openId) { wepy.navigateTo({ // 传参数到下一个页面 // TODO:需要传入...
uniapp中的@tap和@click的区别
MJOY791270505的博客
08-16 4563
uniapp中的@tap和@click的区别
uni-app踩坑日记 ＜uni-list-item @tap=“fn“＞点击无效 + 动态传参
Rudon滨海渔村的博客
01-11 2287
报错 HBuilderX（v3.3.5.20211229）预览，点击无效问题1 <uni-list-item @tap="fn"> 无法触发问题2 <uni-list-item @tap="fn" v-for="(item,index) in news" :key="item.post_id" :title="item.title" :data-id="item.post_id"> 无法通过方法e.currentTarget.dataset.id获取参数 解决办法 .
uniapp+uview @tap.stop=“stop“阻止冒泡失效 bug
最新发布
zhangcz的博客
05-13 284
我的解决办法，使用：@tap.native.stop。经测试，在微信小程序与h5没问题。
@tap和@click的区别
weixin_57633124的博客
05-04 2472
@tap和@click的区别
android tap事件无效,@tap 事件 在子组件不起作用
weixin_39713219的博客
05-29 619
详细问题描述(DCloud产品不会有明显的bug，所以你遇到的问题大都是在特定环境下才能重现的问题，请仔细描述你的环境和重现方式，否则DCloud很难排查解决你的问题)[内容]@tap 事件 在子组件不起作用重现步骤[步骤][结果][期望][如果语言难以表述清晰，拍一个视频或截图，有图有真相]IDE运行环境说明[HBuilder 或 HBuilderX。如果你用其他工具开发uni-app，也需要在...
Vue：button按钮的点击
谢桥的博客
12-09 2543
【代码】Vue：button按钮的点击。
@click和@tap
08-23
@click和@tap都是监听点击事件的方法。不同的是，在移动端，tap方法可以监听更多复杂的点击操作，例如触摸、按住和轻滑等。而click方法在web手机端会有200-300毫秒的延时。所以，为了替代click作为移动端的点击事件，可以使用tap方法。此外，还有一种叫做fastclick的库可以解决click延迟的问题，你可以在github上找到这个库。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [@tap与@click的区别](https://blog.csdn.net/m0_51126511/article/details/124601431)[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^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [tap 和click 事件区别](https://blog.csdn.net/chenny_/article/details/113366289)[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^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

添柴程序猿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值