<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; },
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。