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("可能是误触!")
				}
			},
相关推荐
期待のcode1 分钟前
Vue的安装创建与运行
前端·javascript·vue.js
百锦再4 分钟前
国产数据库的平替亮点——关系型数据库架构适配
android·java·前端·数据库·sql·算法·数据库架构
旺仔Sec4 分钟前
2025年海南省职业院校技能大赛“应用软件系统开发“赛项竞赛样题
前端·应用软件系统开发
FakeOccupational28 分钟前
【树莓派 002】 RP2040 实现示波器 PIO来驱动 ADC10080 并抓取数据方案+ 内置12-bitADC&DMA&网页前端可视化方案
前端
至善迎风31 分钟前
Bun:下一代 JavaScript 运行时与工具链
开发语言·javascript·ecmascript·bun
DJ斯特拉34 分钟前
Vue工程化
前端·javascript·vue.js
秋深枫叶红34 分钟前
嵌入式第三十五篇——linux系统编程——exec族函数
linux·前端·学习
LinDon_41 分钟前
【vue2form表单中的动态表单校验】
前端·javascript·vue.js
一水鉴天1 小时前
整体设计 之28 整体设计 架构表表述总表的 完整程序(之27 的Q268 )(codebuddy)
java·前端·javascript