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("可能是误触!")
				}
			},
相关推荐
Irene199112 分钟前
Prettier 配置文件 .prettierrc.js 和 .prettierrc.json 的区别
javascript·json
国服第二切图仔1 小时前
DevUI Design中后台产品开源前端解决方案之Carousel 走马灯组件使用指南
前端·开源
无限大61 小时前
为什么浏览器能看懂网页代码?——从HTML到渲染引擎的奇幻之旅
前端
福尔摩斯张1 小时前
Linux信号捕捉特性详解:从基础到高级实践(超详细)
linux·运维·服务器·c语言·前端·驱动开发·microsoft
2401_860319521 小时前
DevUI组件库实战:从入门到企业级应用的深度探索 ,如何快速安装DevUI
前端·前端框架
cc蒲公英1 小时前
javascript有哪些内置对象
java·前端·javascript
zhangwenwu的前端小站2 小时前
vue 对接 Dify 官方 SSE 流式响应
前端·javascript·vue.js
王林不想说话2 小时前
受控/非受控组件分析
前端·react.js·typescript
_杨瀚博2 小时前
VUE中使用AXIOS包装API代理
前端
张有志2 小时前
基于 Body 滚动的虚拟滚动组件技术实现
前端·react.js