<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>
