uniapp下的手势事件

uniapp下的手势事件

实现了上滑下滑左滑右滑的事件识别

复制代码
定义return

				touchStartX: 0, // 触屏起始点x  
				touchStartY: 0, // 触屏起始点y 
绑定事件
<view @touchstart="touchStart" @touchend="touchEnd">

方法代码
/**
			 * 触摸开始  
			 **/
			touchStart(e) {
				console.log("触摸开始")
				this.touchStartX = e.touches[0].clientX;
				this.touchStartY = e.touches[0].clientY;
			},
			/**  
			 * 触摸结束  
			 **/
			touchEnd(e) {
				let _this = this;
				console.log("触摸结束")
				let deltaX = e.changedTouches[0].clientX - this.touchStartX;
				let deltaY = e.changedTouches[0].clientY - this.touchStartY;
				if (Math.abs(deltaX) > 50 && Math.abs(deltaX) > Math.abs(deltaY)) {
					if (deltaX >= 0) {
						console.log("左滑")
					} else {
						console.log("右滑")
					}
				} else if (Math.abs(deltaY) > 50 && Math.abs(deltaX) < Math.abs(deltaY)) {
					if (deltaY < 0) {
						console.log("上滑")
					} else {
						console.log("下滑")
					}
				} else {
					console.log("可能是误触!")
				}
			},
相关推荐
无限大69 分钟前
为什么计算机要使用二进制?——从算盘到晶体管的数字革命
前端·后端·架构
良木林18 分钟前
字节前端高频面试题试析
前端
一 乐20 分钟前
家政管理|基于SprinBoot+vue的家政服务管理平台(源码+数据库+文档)
前端·javascript·数据库·vue.js·spring boot
fruge24 分钟前
图片优化终极指南:WebP/AVIF 选型、懒加载与 CDN 配置
前端
掘金一周26 分钟前
数据标注平台正式上线啦! 标注赚现金,低门槛真收益 | 掘金一周 12.10
前端·人工智能·后端
Macbethad32 分钟前
工业触摸屏技术指南:选型、难点与实战解决方案
服务器·前端·数据库
cc蒲公英36 分钟前
vue 对象、数组增删改,对比vue2和vue3 —— 最新总结2025
前端·javascript·vue.js
wordbaby39 分钟前
queries(查询)
前端·react.js
创码小奇客1 小时前
Trae Solo模式实战:我用3小时撸了个儿童睡前故事网页
前端·javascript·人工智能
Jing_Rainbow1 小时前
【AI-9/Lesson30(2025-11-12)】AI + Vibe Coding:Hulk 浏览器扩展开发全解析 —— 从需求文档到实战的完整指南🌈
前端·人工智能·程序员