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("可能是误触!")
				}
			},
相关推荐
棋丶17 分钟前
VUE2和VUE3的区别
开发语言·前端·javascript
screct_demo1 小时前
详细讲一下Vue的路由Vue Router的安装,配置,基础用法和详细用法以及实践中应用
前端·javascript·vue.js
林涧泣1 小时前
【Uniapp-Vue3】使用ref定义响应式数据变量
前端·vue.js·uni-app
PieroPc1 小时前
特制一个自己的UI库,只用CSS、图标、emoji图 日后慢用!!!
javascript·css·ui
HelloZheQ1 小时前
CSS 变量:让你的样式更灵活、更易维护
前端·css·tensorflow
♟彦♟2 小时前
web-前端小实验2
前端
G_qingxin3 小时前
前端排序算法
前端·算法·排序算法
He guolin3 小时前
[Vue]的快速上手
前端·javascript·vue.js
flying robot3 小时前
Rust的对web生态的影响
开发语言·前端·rust
艾斯特_3 小时前
window.open 被浏览器拦截解决方案
前端·javascript