<template>
<view class="content" @touchstart="startHandle" @touchend="touchHandle"> 触屏事件的学习 </view>
</template>
<script>
/* 1 给容器绑定两个触屏事件 touchstart 和 touchend 2 用户按下屏幕事件 1 记录用户按下屏幕的时间 Date.now() 时间戳 返回 1970 -1-1到现在的毫秒数 2 记录用户按下屏幕的坐标 x 和 y 3 用户离开屏幕事件 1 记录用户离开屏幕的时间 Date.now() 2 记录用户离开屏幕的坐标 x 和 y 3 根据按下和离开时间 运算 判断 用户按下屏幕时长是否合法 4 根据按下和离开两对坐标：先判断距离是否合法 后判断滑动的方向 注意：距离要加上绝对值 */ export default { data() { return { startTIme: 0, //按下的时间
startX: 0, startY: 0, }; }, methods: { startHandle(event) { /* console.log("手指按下"); console.log(event.changedTouches[0].clientX); console.log(event.changedTouches[0].clientY); */
this.startTIme = Date.now(); this.startX = event.changedTouches[0].clientX; this.startY = event.changedTouches[0].clientY; }, touchHandle(event) { console.log("手指离开"); const endTime = Date.now(); const endX = event.changedTouches[0].clientX; const endY = event.changedTouches[0].clientY; // 判断按下的时长是否合法
if (endTime - this.startTIme > 2000) { return; } // 用户滑动的方向
let direction = ""; // 判断用户滑动的距离是否合法 合法，则继续判断滑动方向 注意：距离要加上绝对值
if (Math.abs(endX - this.startX) > 10) { direction = endX - this.startX > 0 ? "right" : "left"; } else { return; } // 用户做了合法的滑动操作
console.log(direction); }, }, }; </script>
<style lang="scss" scoped> .content { width: 100%; height: 600rpx; background: cornflowerblue;
}
</style>
