如何实现翻页式h5

翻页式H5的实现方法

翻页式H5通常指通过滑动或点击切换页面的交互形式，常用于营销活动、产品展示等场景。以下是几种常见的实现方式：

使用HTML5和CSS3实现基础翻页

通过CSS3的transform和transition属性实现页面滑动效果。HTML结构通常包含多个全屏section，通过JavaScript监听滑动事件切换页面。

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

.page-container {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.page {
  width: 100%;
  height: 100%;
  position: absolute;
  transition: transform 0.5s ease;
}

let currentPage = 0;
const pages = document.querySelectorAll('.page');
document.addEventListener('wheel', (e) => {
  if (e.deltaY > 0 && currentPage < pages.length - 1) {
    currentPage++;
  } else if (e.deltaY < 0 && currentPage > 0) {
    currentPage--;
  }
  pages.forEach((page, index) => {
    page.style.transform = `translateY(-${currentPage * 100}%)`;
  });
});

使用现成的JavaScript库

Swiper.js是一个流行的触摸滑动库，支持多种滑动效果和配置选项。

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<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 src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
  const swiper = new Swiper('.swiper-container', {
    direction: 'vertical',
    mousewheel: true,
  });
</script>

移动端适配和优化

针对移动设备需要添加触摸事件支持，并优化性能。使用touchstart、touchmove和touchend事件替代或补充鼠标事件。避免过多复杂动画导致卡顿，可以使用CSS的will-change属性优化渲染性能。

let startY, moveY;
document.addEventListener('touchstart', (e) => {
  startY = e.touches[0].clientY;
});
document.addEventListener('touchmove', (e) => {
  moveY = e.touches[0].clientY;
  const diff = moveY - startY;
  if (Math.abs(diff) > 50) {
    if (diff > 0 && currentPage > 0) {
      currentPage--;
    } else if (diff < 0 && currentPage < pages.length - 1) {
      currentPage++;
    }
    updatePages();
    startY = moveY;
  }
});

添加页面指示器和导航按钮

增强用户体验，可以添加分页指示器或导航按钮。通过CSS创建小圆点指示器，JavaScript更新当前激活状态。

<div class="pagination">
  <span class="dot active"></span>
  <span class="dot"></span>
  <span class="dot"></span>
</div>

function updatePagination() {
  const dots = document.querySelectorAll('.dot');
  dots.forEach((dot, index) => {
    dot.classList.toggle('active', index === currentPage);
  });
}

动画和过渡效果

使用CSS动画或JavaScript动画库如GSAP创建更丰富的页面过渡效果。例如淡入淡出、3D翻转等。

.page.exit {
  animation: fadeOut 0.5s forwards;
}
.page.enter {
  animation: fadeIn 0.5s forwards;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

性能优化技巧

避免过多DOM操作，使用硬件加速。限制滚动事件的触发频率，可以使用requestAnimationFrame或节流函数。对于复杂内容，考虑使用懒加载技术。

let isScrolling;
window.addEventListener('scroll', () => {
  window.cancelAnimationFrame(isScrolling);
  isScrolling = window.requestAnimationFrame(() => {
    // 处理滚动逻辑
  });
}, false);