vue长按事件touch实现代码

3403771864 发布于2022-10-23 18:06 / 575人阅读

　　1.touch事件

　　以下是四种touch事件

　　touchstart: //手指放到屏幕上时触发

　　touchmove: //手指在屏幕上滑动式触发

　　touchend: //手指离开屏幕时触发

　　touchcancel: //系统取消touch事件的时候触发，这个函数运用很少

　　2.长按弹出删除按钮，点击删除

　　<div v-for="item in list" @touchstart.native="showDeleteButton(item.id)" @touchend.native="clearLoop(item.id)">
　　内容...
　　</div>

　　showDeleteButton(e) {
　　clearTimeout(this.Loop); //再次清空定时器，防止重复注册定时器
　　this.Loop = setTimeout(function() {
　　this.$dialog.confirm({ //这是个弹出框，用的ydui
　　title: '温馨提示',
　　mes: '是否删除此条消息',
　　opts: () => {
　　this.$dialog.loading.open('删除中...');
　　this.$http.post(this.$store.state.ip + '...', {
　　id: e
　　}, {
　　headers: {},
　　}).then((response) => {
　　this.$dialog.loading.close();
　　this.$dialog.toast({
　　mes: response.body.info,
　　timeout: 1000
　　});
　　var data = this.rulist
　　console.log(data)
　　for(var i in data) {
　　if(data[i].id == e) {
　　data.splice(i, 1)
　　}
　　}
　　console.log(data)
　　this.rulist=data
　　}).catch(function(response) {
　　});
　　}
　　});
　　}.bind(this), 1000);
　　},
　　clearLoop(e) {
　　clearTimeout(this.Loop);
　　},

　　补充：下面看下Vue长按触摸事件

　　开始触摸：

　　@touchstart="touchClose()"

　　触摸结束：

　　@touchend="touchOpen()"

　　使用示例：

欢迎大家关注更多精彩内容。

私有云服务器托管 touch事件长按-复制-代码-js VUE实现webrtc Vue实现分页

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/128199.html

无聊想实现一下vue的自定义事件，粗糙的效果，用来抛砖引玉

摘要：原理首先要理解的自定义事件。这样子就好了直接预览下效果，能正常调用，还行还行酱紫之后会不会好一点，写的不好道友们轻喷背景是这样子滴，有时候我们用vue框架的时候，要用到很多手势，像tap、doubletap、longtap......，当然现在网上有很多手势裤什么的，拿来改一下也是可以实现自己想要的效果滴，我是希望用vue 的时候类似于 {{msg}}－－－长按（longtap）点...

darkerXi 2019-08-22 10:44 评论0 收藏0
移动端VUE点击、滑动和长按等事件处理（自定义指令）

摘要：问题移动设备上的触摸事件如何利用它们三个来处理点击长按滑动等操作，以及如何在测试用例中模拟它们的操作参考了实现方法上这位大哥的思路移动设备的点击优化参考了感谢解决使用自定义指令来干这件事来记录开始点击的位置和时间，并在这里边判断长按操作来确问题：移动设备上的触摸事件：touchstart、touchmove、touchend如何利用它们三个来处理点击、长按、滑动等操作，以及如何在测...

niuxiaowei111 2019-08-22 15:38 评论0 收藏0
vue实现移动端拖拽悬浮按钮

　　移动端拖拽悬浮按钮如何用vue实现，下面看看具体内容：　　功能介绍：　　开发中，要考虑用户体验，悬浮按钮不仅要显示在侧边，更是可以允许随意拖拽换位。　　需求描述：　　1、按钮悬浮显示在页面侧边；　　2、当手指长按左键按钮，即可允许拖拽改变位置；　　3、按钮移动结束，手指松开，计算距离左右两侧距离并自动移动至侧边显示；　　4、移动至侧边后，按钮根据具体左右两次位置判断改变现实样式；　　整体思路：...

3403771864 2022-09-13 21:29 评论0 收藏0
如何实现swipe、tap、longTap等自定义事件

摘要：分别存储事件的定时器。事件定时器延时时间存储事件对象滑动方向判断我们根据下图以及对应的代码来理解滑动的时候方向是如何判定的。取消长按，以及取消所有事件取消长按取消所有事件方式都是类似，先调用取消定时器，然后释放对应的变量，等候垃圾回收。前言移动端原生支持touchstart、touchmove、touchend等事件，但是在平常业务中我们经常需要使用swipe、tap、double...

罗志环 2019-08-22 15:02 评论0 收藏0