js实现手机滑动效果

实现手机滑动效果的基本方法

在JavaScript中实现手机滑动效果通常涉及监听触摸事件（touchstart、touchmove、touchend），计算滑动距离和方向，并更新UI。以下是核心实现步骤：

监听触摸事件

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

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

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

element.addEventListener('touchend', () => {
  // 滑动结束后的处理
});

计算滑动距离和方向

element.addEventListener('touchend', () => {
  const threshold = 50; // 滑动阈值
  if (Math.abs(moveX) > threshold) {
    if (moveX > 0) {
      console.log('向右滑动');
    } else {
      console.log('向左滑动');
    }
  }
});

实现平滑滑动动画

使用CSS过渡或transform实现平滑动画效果：

element.style.transform = `translateX(${moveX}px)`;
element.style.transition = 'transform 0.3s ease'; // 添加过渡效果

完整示例代码

const slider = document.getElementById('slider');
let startX, currentX, isDragging = false;

slider.addEventListener('touchstart', (e) => {
  isDragging = true;
  startX = e.touches[0].clientX;
  currentX = startX;
  slider.style.transition = 'none'; // 拖动时禁用过渡
});

slider.addEventListener('touchmove', (e) => {
  if (!isDragging) return;
  const x = e.touches[0].clientX;
  const deltaX = x - currentX;
  currentX = x;

  // 更新元素位置
  const currentTranslate = getTranslateX(slider);
  slider.style.transform = `translateX(${currentTranslate + deltaX}px)`;
});

slider.addEventListener('touchend', () => {
  isDragging = false;
  const translateX = getTranslateX(slider);
  const threshold = 100;

  // 根据滑动距离决定最终位置
  if (Math.abs(translateX) > threshold) {
    const direction = translateX > 0 ? 1 : -1;
    const newPosition = direction * slider.offsetWidth;
    slider.style.transition = 'transform 0.3s ease';
    slider.style.transform = `translateX(${newPosition}px)`;
  } else {
    // 回到原点
    slider.style.transition = 'transform 0.3s ease';
    slider.style.transform = 'translateX(0)';
  }
});

function getTranslateX(element) {
  const transform = window.getComputedStyle(element).transform;
  if (transform === 'none') return 0;
  const matrix = transform.match(/^matrix\((.+)\)$/)[1].split(', ');
  return parseFloat(matrix[4]);
}

使用第三方库简化实现

对于更复杂的需求，可以考虑使用现成的滑动库：

• Swiper.js：功能强大的触摸滑动库
• Hammer.js：手势识别库
• AlloyFinger：轻量级手势库

Swiper.js示例：

const swiper = new Swiper('.swiper-container', {
  loop: true,
  pagination: {
    el: '.swiper-pagination',
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

性能优化建议

避免在touchmove事件中执行复杂计算或频繁DOM操作，使用requestAnimationFrame优化动画：

function animateSlider() {
  requestAnimationFrame(() => {
    slider.style.transform = `translateX(${currentPosition}px)`;
  });
}

考虑使用passive事件监听器提高滚动性能：

element.addEventListener('touchmove', handler, { passive: true });