监听页面左右/上下滑动事件
<template>
<view @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend" class="touch">
上下/左右 滑动
</view>
</template>
<script>
export default {
data() {
return {
/* 移动所需参数 */
startX: 0,
startY: 0,
endX: 0,
endY: 0,
isStatus: false,
}
},
methods: {
/* 监听滑动开始 */
touchstart(e) {
e.preventDefault();
this.startX = e.touches[0].pageX;
this.startY = e.touches[0].pageY;
},
/* 监听滑动移动 */
touchmove(e) {
this.isStatus= true;
this.endX = e.touches[0].pageX;
this.endY = e.touches[0].pageY;
},
/* 监听滑动结束 */
touchend(e) {
/* 判断移动方向 */
let X = this.endX - this.startX,
Y = this.endY - this.startY;
/* 判断是否移动还是点击 */
if (this.isStatus) {
if (X > 0 && Math.abs(X) > Math.abs(Y)) {
//向右
} else if (X < 0 && Math.abs(X) > Math.abs(Y)) {
//向左
} else if (Y > 0 && Math.abs(Y) > Math.abs(X)) {
//向下
} else if (Y < 0 && Math.abs(Y) > Math.abs(X)) {
//向上
} else {
}
} else {
}
},
}
}
</script>
<style scoped lang="less">
.touch {
width: 100vw;
height: 100vh;
}
</style>