h5页面滑动效果实现

实现H5页面滑动效果的方法

H5页面滑动效果可以通过多种方式实现，包括原生JavaScript、CSS动画或第三方库。以下是几种常见的方法：

使用CSS Scroll Snap

CSS Scroll Snap提供了一种简单的方式来实现滑动效果，适合轮播图或分页滑动。

.container {
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  display: flex;
}

.slide {
  scroll-snap-align: start;
  flex: 0 0 100%;
}

<div class="container">
  <div class="slide">Slide 1</div>
  <div class="slide">Slide 2</div>
  <div class="slide">Slide 3</div>
</div>

使用Swiper.js库

Swiper.js是一个流行的滑动库，支持触摸手势和多种动画效果。

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
  </div>
</div>

<script>
  var swiper = new Swiper('.swiper-container', {
    loop: true,
    autoplay: {
      delay: 3000,
    },
  });
</script>

使用原生JavaScript实现滑动

通过监听触摸事件，可以实现自定义滑动效果。

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;
  slider.style.transform = `translateX(${diff}px)`;
});

slider.addEventListener('touchend', () => {
  // 根据滑动距离判断是否切换页面
});

使用CSS Transform和Transition

通过CSS的transform和transition属性，可以实现平滑的滑动动画。

.slider {
  transition: transform 0.3s ease;
}

.slide {
  width: 100%;
  display: inline-block;
}

let currentSlide = 0;
const slides = document.querySelectorAll('.slide');
const slider = document.querySelector('.slider');

function goToSlide(index) {
  slider.style.transform = `translateX(-${index * 100}%)`;
  currentSlide = index;
}

使用requestAnimationFrame优化性能

对于复杂的滑动动画，可以使用requestAnimationFrame来优化性能。

function animateSlide() {
  // 计算滑动位置
  requestAnimationFrame(animateSlide);
}

animateSlide();

以上方法可以根据具体需求选择，CSS Scroll Snap适合简单场景，Swiper.js适合复杂交互，原生JavaScript则提供更大的灵活性。