uniApp 滑动手势事件判定 支持NVUE
作者:互联网
<div = @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd"> <div ref="test"> //内容 </div> </div>
data(){ return{ touchStartX: 0, //触摸时的原点 touchStartY: 0, //触摸时的原点 time: 0, // 时间记录,用于滑动时且时间小于1s则执行左右滑动 interval: '', // 记录/清理时间记录 touchMoveX: 0, // x轴方向移动的距离 touchMoveY: 0, // y轴方向移动的距离 direction: 'all', distance: 30,} }
// 触摸开始事件 touchStart(e) { this.touchStartX = e.changedTouches[0].pageX; // 获取触摸时的原点 this.touchStartY = e.changedTouches[0].pageY; // 获取触摸时的原点 // 使用js计时器记录时间 this.interval = setInterval(() => { this.time++; }, 100); }, // 触摸移动事件 touchMove(e) { this.touchMoveX = e.changedTouches[0].pageX; this.touchMoveY = e.changedTouches[0].pageY; }, // 触摸结束事件 touchEnd(e) { let that = this; let moveX = this.touchMoveX - this.touchStartX; let moveY = this.touchMoveY - this.touchStartY; if (Math.sign(moveX) == -1) { moveX = moveX * -1; } if (Math.sign(moveY) == -1) { moveY = moveY * -1; } if (2 * moveX <= moveY) { // 上下 if (this.direction != 'all' && this.direction != 'vertical') return; // 向上滑动 if (this.touchMoveY - this.touchStartY <= -this.distance && this.time < 10) { console.log('1_1'); } // 向下滑动 if (this.touchMoveY - this.touchStartY >= this.distance && this.time < 10) { console.log('1_2'); } } else if (moveX > 2 * moveY) { // 左右 if (this.direction != 'all' && this.direction != 'horizontal') return; // 向左滑动 if (this.touchMoveX - this.touchStartX <= -this.distance && this.time < 10) { } } // 向右滑动 if (this.touchMoveX - this.touchStartX >= this.distance && this.time < 10) { } } } clearInterval(this.interval); // 清除setInterval this.time = 0; },
标签:uniApp,NVUE,触摸,changedTouches,moveX,moveY,time,滑动,touchMoveX 来源: https://www.cnblogs.com/wangshishuai/p/16392694.html