<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;
},