当前位置：首页 > JavaScript

js实现滑动换页

2026-02-02 16:03:13JavaScript

实现滑动换页的基本原理

滑动换页通常通过监听触摸事件（touchstart、touchmove、touchend）或鼠标事件（mousedown、mousemove、mouseup）来实现。核心逻辑是计算滑动距离和方向，当达到阈值时触发页面切换。

监听触摸事件

let startX, moveX;
const slider = document.querySelector('.slider');

slider.addEventListener('touchstart', (e) => {
  startX = e.touches[0].clientX;
});

slider.addEventListener('touchmove', (e) => {
  moveX = e.touches[0].clientX;
  const diff = moveX - startX;
  e.preventDefault(); // 阻止默认滚动行为
});

slider.addEventListener('touchend', () => {
  const threshold = 50; // 滑动阈值
  const diff = moveX - startX;

  if (diff > threshold) {
    // 向右滑动，切换到上一页
    goToPrevPage();
  } else if (diff < -threshold) {
    // 向左滑动，切换到下一页
    goToNextPage();
  }
});

添加CSS过渡效果

.slider {
  transition: transform 0.3s ease;
}

实现页面切换函数

let currentPage = 0;
const pages = document.querySelectorAll('.page');
const pageWidth = window.innerWidth;

function goToPrevPage() {
  if (currentPage > 0) {
    currentPage--;
    updateSliderPosition();
  }
}

function goToNextPage() {
  if (currentPage < pages.length - 1) {
    currentPage++;
    updateSliderPosition();
  }
}

function updateSliderPosition() {
  slider.style.transform = `translateX(-${currentPage * pageWidth}px)`;
}

处理鼠标事件（桌面端兼容）

let isMouseDown = false;
let mouseStartX;

slider.addEventListener('mousedown', (e) => {
  isMouseDown = true;
  mouseStartX = e.clientX;
});

slider.addEventListener('mousemove', (e) => {
  if (!isMouseDown) return;
  const mouseMoveX = e.clientX;
  const diff = mouseMoveX - mouseStartX;
});

slider.addEventListener('mouseup', () => {
  if (!isMouseDown) return;
  isMouseDown = false;
  const threshold = 50;
  const diff = mouseMoveX - mouseStartX;

  if (diff > threshold) {
    goToPrevPage();
  } else if (diff < -threshold) {
    goToNextPage();
  }
});

slider.addEventListener('mouseleave', () => {
  isMouseDown = false;
});

优化性能的建议

使用CSS的will-change属性提前告知浏览器可能的变化：

js实现滑动换页

.slider {
  will-change: transform;
}

考虑使用requestAnimationFrame来优化动画性能：

function animateSlider() {
  requestAnimationFrame(() => {
    slider.style.transform = `translateX(-${currentPage * pageWidth}px)`;
  });
}

完整示例代码结构

HTML结构：

js实现滑动换页

<div class="slider-container">
  <div class="slider">
    <div class="page">Page 1</div>
    <div class="page">Page 2</div>
    <div class="page">Page 3</div>
  </div>
</div>

CSS样式：

.slider-container {
  overflow: hidden;
  width: 100%;
}

.slider {
  display: flex;
  transition: transform 0.3s ease;
  will-change: transform;
}

.page {
  flex: 0 0 100%;
  width: 100%;
}