js触屏左右滑动导航

基础概念

JavaScript 触屏左右滑动导航主要涉及到触摸事件（touch events）的处理。触摸事件包括 touchstart、touchmove 和 touchend 等，这些事件允许开发者响应用户在触摸屏设备上的操作。

类型与应用场景

水平滑动导航：常见于图片轮播、菜单切换等场景。
垂直滑动导航：适用于长列表的滚动浏览或页面内的部分区域切换。

示例代码

以下是一个简单的水平滑动导航的实现示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Swipe Navigation</title>
<style>
  .nav-container {
    display: flex;
    overflow-x: hidden;
    width: 100%;
    height: 100px;
    border: 1px solid #ccc;
  }
  .nav-item {
    min-width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f0f0f0;
    border-right: 1px solid #ccc;
  }
</style>
</head>
<body>

<div class="nav-container" id="navContainer">
  <div class="nav-item">Item 1</div>
  <div class="nav-item">Item 2</div>
  <div class="nav-item">Item 3</div>
  <div class="nav-item">Item 4</div>
</div>

<script>
  const navContainer = document.getElementById('navContainer');
  let startX, currentTranslate, prevTranslate = 0, animationID = 0, currentIndex = 0;

  navContainer.addEventListener('touchstart', touchStart);
  navContainer.addEventListener('touchmove', touchMove);
  navContainer.addEventListener('touchend', touchEnd);

  function touchStart(event) {
    startX = event.touches[0].clientX;
    cancelAnimationFrame(animationID);
  }

  function touchMove(event) {
    const currentX = event.touches[0].clientX;
    currentTranslate = prevTranslate + currentX - startX;
    setTransform(currentTranslate);
  }

  function touchEnd() {
    const movedBy = currentTranslate - prevTranslate;
    if (movedBy < -100 && currentIndex < 3) currentIndex += 1;
    if (movedBy > 100 && currentIndex > 0) currentIndex -= 1;
    prevTranslate = -currentIndex * window.innerWidth;
    setTransform(prevTranslate);
    animationID = requestAnimationFrame(smoothTransition);
  }

  function setTransform(translate) {
    navContainer.style.transform = `translateX(${translate}px)`;
  }

  function smoothTransition() {
    setTransform(prevTranslate);
    if ((prevTranslate > currentTranslate && prevTranslate - currentTranslate > 1) || (prevTranslate < currentTranslate && currentTranslate - prevTranslate > 1)) {
      cancelAnimationFrame(animationID);
    } else {
      requestAnimationFrame(smoothTransition);
    }
  }
</script>

</body>
</html>