<div @touchstart="moveStart" @touchmove="onMove" @touchend="moveEnd"></div>
// 手势滑动开始
moveStart(e) {
this.startX = e.targetTouches[0].pageX
this.startY = e.targetTouches[0].pageY
},
onMove(e) {
this.endX = e.targetTouches[0].pageX
this.endY = e.targetTouches[0].pageY
const dValueX = Math.abs(this.startX - this.endX)
const dValueY = Math.abs(this.startY - this.endY)
if (dValueX > dValueY) {
// 水平滑动长度大于纵向滑动长度,那么选择水平滑动,阻止浏览器默认左右滑动事件
e.preventDefault();
if (dValueX > 40 && this.startX > this.endX) {
if (this.index < this.list.length - 1 && this.canMove) {
this.canMove = false;
this.index += 1;
console.log("// 向左划");
}
} else if (dValueX > 40 && this.startX < this.endX && this.canMove) {
let a = dValueX > 40 && this.startX < this.endX && this.canMove
this.canMove = false;
this.index -= 1;
console.log("// 向右划");
}
} else {
// 恢复默认事件
window.event.returnValue = true
}
},
moveEnd(e) {
this.canMove = true
this.startX = this.endX = 0
this.startY = this.endY = 0
},
// 手势滑动结束