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("可能是误触!")
				}
			},
相关推荐
Jing_Rainbow19 小时前
【AI-7 全栈-2 /Lesson16(2025-11-01)】构建一个基于 AIGC 的 Logo 生成 Bot:从前端到后端的完整技术指南 🎨
前端·人工智能·后端
玉宇夕落19 小时前
🔁 字符串反转 × 两数之和:前端面试高频题深度拆解(附5种反转写法 + 哈希优化)
javascript
神秘的猪头19 小时前
🧱 深入理解栈(Stack):原理、实现与实战应用
前端·javascript·面试
用户29654127591719 小时前
JSAPIThree UI 控件学习笔记:用内置控件提升交互
前端
明教教主张5G19 小时前
Vue响应式原理(13)-ref实现原理解析
前端·vue.js
StockPP19 小时前
印度尼西亚股票多时间框架K线数据可视化页面
前端·javascript·后端
kungggyoyoyo20 小时前
TRAE中国版SOLO模式上线!我用它从0到1开发了一款AI小说编辑器
前端·vue.js·trae
ohyeah20 小时前
栈:那个“先进后出”的小可爱,其实超好用!
前端·数据结构
FinelyYang20 小时前
uniapp+unipush2.0+WebRTC实现h5一对一视频通话
uni-app·音视频·webrtc
心随雨下20 小时前
typescript中Triple-Slash Directives如何使用
前端·javascript·typescript