反应原生滑动屏幕 - Javascript

在开发响应式的网页和 web 应用程序时，滑动屏幕是一个很常见的需求。本文将介绍如何使用原生的 JavaScript 在网页上反应用户的滑动操作并执行相应的动作。

监听滑屏事件

我们可以使用 touchstart、touchmove 和 touchend 事件来监听用户的滑屏操作。其中，touchstart 事件在手指触及屏幕时被触发，touchmove 事件在手指在屏幕上滑动时被触发，touchend 事件在手指离开屏幕时被触发。

可以如下所示使用 addEventListener() 方法来添加上述三个事件的监听器：

window.addEventListener('touchstart', handleTouchStart, false);
window.addEventListener('touchmove', handleTouchMove, false);
window.addEventListener('touchend', handleTouchEnd, false);

在上面的代码中，我们分别添加了 handleTouchStart()、handleTouchMove() 和 handleTouchEnd() 函数作为对应事件的处理函数。

实现滑屏事件处理逻辑

在上面的代码中，我们为三个滑屏事件添加了处理函数，现在我们需要实现这些函数，来响应用户的滑屏操作并执行相应的动作。

handleTouchStart() 函数

当用户第一次触摸屏幕时，handleTouchStart() 函数被调用。在这个函数中，我们需要记录下当前屏幕上的触点信息，包括触点的坐标和时间戳。

function handleTouchStart(event) {
  const firstTouch = event.touches[0];
  touchStartX = firstTouch.clientX;
  touchStartY = firstTouch.clientY;
  touchStartTime = Date.now();
}

在上面的代码中，我们使用 event.touches[0] 取出当前触点的信息，包括触点在屏幕上的坐标和时间戳。

handleTouchMove() 函数

当用户在屏幕上滑动时，handleTouchMove() 函数被调用。在这个函数中，我们需要计算出用户滑动的距离和方向，并执行相应的动作。

function handleTouchMove(event) {
  if (!touchStartX || !touchStartY || !touchStartTime) {
    return;
  }

  const touchEndX = event.touches[0].clientX;
  const touchEndY = event.touches[0].clientY;
  const touchEndTime = Date.now();

  const dx = touchEndX - touchStartX;
  const dy = touchEndY - touchStartY;
  const dt = touchEndTime - touchStartTime;

  const absDx = Math.abs(dx);
  const absDy = Math.abs(dy);
  const absDt = Math.abs(dt);

  if (absDx < swipeThreshold && absDy < swipeThreshold) {
    return;
  }

  if (absDx > absDy && absDt < swipeTimeThreshold) {
    if (dx > 0) {
      handleSwipeRight();
    } else {
      handleSwipeLeft();
    }
  } else if (absDy > absDx && absDt < swipeTimeThreshold) {
    if (dy > 0) {
      handleSwipeDown();
    } else {
      handleSwipeUp();
    }
  }

  touchStartX = null;
  touchStartY = null;
  touchStartTime = null;
}

在上面的代码中，我们首先根据之前记录下的触点信息，计算出用户滑动的距离和方向。我们需要在这一步鉴定用户是否在进行滑屏操作，如果用户的滑动距离小于一个阈值 swipeThreshold，则不认为用户在进行滑屏操作。

接下来，我们判断用户滑动的方向，如果用户沿横向滑动距离大于纵向滑动距离，并且滑动时间少于一个阈值 swipeTimeThreshold，则认为用户向左或向右滑动了。反之，如果用户沿纵向滑动距离大于横向滑动距离，并且滑动时间少于一个阈值 swipeTimeThreshold，则认为用户向上或向下滑动了。在这两种情况下，我们根据用户滑动的方向执行相应的动作。例如，如果用户向左滑动了，则调用 handleSwipeLeft() 函数。

最后，我们需要重置触点信息，以便下一次滑屏操作。

handleTouchEnd() 函数

当用户离开屏幕时，handleTouchEnd() 函数被调用。在这个函数中，我们可以重置触点信息。

function handleTouchEnd(event) {
  touchStartX = null;
  touchStartY = null;
  touchStartTime = null;
}

完整代码

下面是本文介绍的滑屏事件处理代码的完整示例：

let touchStartX = null;
let touchStartY = null;
let touchStartTime = null;

const swipeThreshold = 10;
const swipeTimeThreshold = 1000;

window.addEventListener('touchstart', handleTouchStart, false);
window.addEventListener('touchmove', handleTouchMove, false);
window.addEventListener('touchend', handleTouchEnd, false);

function handleTouchStart(event) {
  const firstTouch = event.touches[0];
  touchStartX = firstTouch.clientX;
  touchStartY = firstTouch.clientY;
  touchStartTime = Date.now();
}

function handleTouchMove(event) {
  if (!touchStartX || !touchStartY || !touchStartTime) {
    return;
  }

  const touchEndX = event.touches[0].clientX;
  const touchEndY = event.touches[0].clientY;
  const touchEndTime = Date.now();

  const dx = touchEndX - touchStartX;
  const dy = touchEndY - touchStartY;
  const dt = touchEndTime - touchStartTime;

  const absDx = Math.abs(dx);
  const absDy = Math.abs(dy);
  const absDt = Math.abs(dt);

  if (absDx < swipeThreshold && absDy < swipeThreshold) {
    return;
  }

  if (absDx > absDy && absDt < swipeTimeThreshold) {
    if (dx > 0) {
      handleSwipeRight();
    } else {
      handleSwipeLeft();
    }
  } else if (absDy > absDx && absDt < swipeTimeThreshold) {
    if (dy > 0) {
      handleSwipeDown();
    } else {
      handleSwipeUp();
    }
  }

  touchStartX = null;
  touchStartY = null;
  touchStartTime = null;
}

function handleTouchEnd(event) {
  touchStartX = null;
  touchStartY = null;
  touchStartTime = null;
}

function handleSwipeLeft() {
  console.log('swipe left');
}

function handleSwipeRight() {
  console.log('swipe right');
}

function handleSwipeUp() {
  console.log('swipe up');
}

function handleSwipeDown() {
  console.log('swipe down');
}

总结

在本文中，我们介绍了如何使用原生的 JavaScript 监听滑屏事件，并执行相应的动作。需要注意，本文中的示例代码仅针对单点触控的情况，如果您需要处理多点触控和手势操作，请使用更加专业的库或框架。