Svelte中卡片容器滑动越界问题排查求助

问题根源 #

你代码里的第二个if语句失效，核心原因是变量名不一致：handleTouchMove里给dist赋值，但判断条件里用的是未定义的distance，控制台应该能看到distance is not defined的报错。另外，固定用-200判断边界的逻辑也不合理，应该结合当前卡片的位置来做判断。

修正方案 #

首先统一变量名，然后添加状态跟踪当前显示的卡片索引，通过索引判断是否到达边界，禁止无效滑动。以下是完整的修正代码（基于Svelte框架）：

<script>
  let currentIndex = 0; // 跟踪当前显示的卡片索引，初始为第一张
  const totalCards = 3; // 总卡片数量
  let startX = 0;
  let dist = 0;

  const handleTouchStart = (event) => {
    startX = event.touches[0].clientX;
  };

  const handleTouchMove = (event) => {
    const currentX = event.touches[0].clientX;
    dist = startX - currentX;

    // 到达最左侧卡片，禁止向右滑
    if (currentIndex === 0 && dist < 0) {
      dist = 0;
    }
    // 到达最右侧卡片，禁止向左滑
    if (currentIndex === totalCards - 1 && dist > 0) {
      dist = 0;
    }
  };

  const handleTouchEnd = () => {
    // 设置滑动触发阈值，避免微小滑动误操作
    const threshold = 50;
    if (dist > threshold) {
      // 左滑切换下一张，先判断是否未到边界
      if (currentIndex < totalCards - 1) {
        currentIndex++;
        goRight();
      }
    } else if (dist < -threshold) {
      // 右滑切换上一张，先判断是否未到边界
      if (currentIndex > 0) {
        currentIndex--;
        goLeft();
      }
    }
    // 重置滑动距离
    dist = 0;
  };

  // 替换成你实际的容器偏移控制逻辑
  const goRight = () => {
    console.log("切换到下一张卡片");
    // 示例：document.querySelector('.cards').style.transform = `translateX(-${currentIndex * 100}vw)`;
  };

  const goLeft = () => {
    console.log("切换到上一张卡片");
    // 示例：document.querySelector('.cards').style.transform = `translateX(-${currentIndex * 100}vw)`;
  };
</script>

<div class="cards" on:touchstart={handleTouchStart} on:touchmove={handleTouchMove} on:touchend={handleTouchEnd}>
  <About/>
  <Services/>
  <Contact/>
</div>

关键说明 #

1. 变量统一：把滑动距离相关变量全部统一为dist，解决未定义变量的报错问题
2. 精准边界判断：通过currentIndex和总卡片数的对比，直接锁定左右边界，禁止无效滑动
3. 滑动阈值：添加50px的触发阈值，避免手指轻微抖动就触发卡片切换
4. 双重边界保护：在handleTouchEnd里再次判断索引范围，彻底防止越界操作

内容的提问来源于stack exchange，提问作者Ray M