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("可能是误触!")
				}
			},
相关推荐
一抓掉一大把1 分钟前
MiniExcel模板填充Excel导出
开发语言·javascript·ecmascript
好运yoo12 分钟前
npm install的原理
前端·npm
Jiaberrr16 分钟前
uniapp 安卓 APP 后台持续运行(保活)的尝试办法
android·前端·javascript·uni-app·app·保活
不老刘17 分钟前
uniapp+vue3实现CK通信协议(基于jjc-tcpTools)
前端·javascript·uni-app
蓝婷儿35 分钟前
第二章支线八 ·CSS终式:Tailwind与原子风暴
前端·css
vanora11111 小时前
Vue在线预览excel、word、ppt等格式数据。
前端·javascript·vue.js
树上有只程序猿1 小时前
低代码不是炫技,而是回归需求的必然答案
前端
比特森林探险记1 小时前
Go 中 map 的双值检测写法详解
java·前端·golang
溪饱鱼1 小时前
React源码阅读-fiber核心构建原理
前端·javascript·react.js
陈随易1 小时前
Element Plus 2.10.0 重磅发布!新增Splitter组件
前端·后端·程序员