js实现手机滑动效果

使用Touch事件实现滑动效果

在移动端实现滑动效果，主要通过监听touchstart、touchmove和touchend事件来实现。以下是一个基础实现示例：

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

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

slider.addEventListener('touchmove', (e) => {
  moveX = e.touches[0].clientX - startX;
  e.preventDefault();
  slider.style.transform = `translateX(${moveX}px)`;
});

slider.addEventListener('touchend', () => {
  // 滑动结束后的处理逻辑
  slider.style.transform = 'translateX(0)';
  slider.style.transition = 'transform 0.3s ease';
});

添加惯性滑动效果

为了使滑动更自然，可以添加惯性效果：

let startX, moveX, velocity;
const slider = document.getElementById('slider');
let lastMoveTime = 0;

slider.addEventListener('touchmove', (e) => {
  const now = Date.now();
  const deltaTime = now - lastMoveTime;
  const currentX = e.touches[0].clientX;
  velocity = (currentX - startX) / deltaTime;
  startX = currentX;
  lastMoveTime = now;

  moveX = e.touches[0].clientX - startX;
  slider.style.transform = `translateX(${moveX}px)`;
});

slider.addEventListener('touchend', () => {
  const distance = moveX + velocity * 100;
  slider.style.transform = `translateX(${distance}px)`;
  slider.style.transition = 'transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1)';
});

使用CSS Transform优化性能

为了确保滑动流畅，应该使用CSS transform而不是直接修改left/top属性：

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

实现滑动边界限制

防止滑动超出容器边界：

const maxLeft = 0;
const maxRight = 300;

slider.addEventListener('touchend', () => {
  let finalPosition = moveX;

  if (finalPosition > maxRight) {
    finalPosition = maxRight;
  } else if (finalPosition < maxLeft) {
    finalPosition = maxLeft;
  }

  slider.style.transform = `translateX(${finalPosition}px)`;
});

使用第三方库简化实现

如果项目允许使用第三方库，可以考虑以下选项：

1. Hammer.js：专门处理手势事件的库

   const hammer = new Hammer(slider);
   hammer.on('pan', (e) => {
   slider.style.transform = `translateX(${e.deltaX}px)`;
   });

2. Swiper.js：完整的滑动组件解决方案

   const mySwiper = new Swiper('.swiper-container', {
   // 配置选项
   });

处理多指触摸的情况

如果需要支持多指操作，需要调整事件处理逻辑：

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

性能优化建议

1. 使用requestAnimationFrame进行动画更新
2. 避免在事件处理函数中进行复杂的DOM操作
3. 对频繁操作的元素使用will-changeCSS属性
4. 考虑使用passive事件监听器提高滚动性能

   slider.addEventListener('touchmove', (e) => {
   // 处理逻辑
   }, { passive: true });