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("可能是误触!")
				}
			},
相关推荐
Frankabcdefgh5 分钟前
前端进化论·JavaScript 篇 · 数据类型
javascript·安全·面试·数据类型·操作符·初学者·原理解析
水煮白菜王26 分钟前
深入理解 Webpack 核心机制与编译流程
前端·webpack·node.js
梦幻通灵32 分钟前
Excel分组计算求和的两种实现方案
前端·excel
geovindu43 分钟前
vue3: pdf.js 3.4.120 using javascript
开发语言·javascript·vue.js·pdf
whatever who cares1 小时前
CSS3 伪类和使用场景
前端·css·css3
水银嘻嘻1 小时前
Web 自动化之 HTML & JavaScript 详解
前端·自动化·html
天天打码1 小时前
Lynx-字节跳动跨平台框架多端兼容Android, iOS, Web 原生渲染
android·前端·javascript·ios
zoe_ya1 小时前
react-diff-viewer 如何实现语法高亮
javascript·react.js·ecmascript
大G哥2 小时前
项目中利用webpack的require.context实现批量引入/导入图片
前端·webpack·node.js
sunbyte2 小时前
Three.js + React 实战系列 - 联系方式提交表单区域 Contact 组件✨(表单绑定 + 表单验证)
开发语言·javascript·react.js