vue实现翻页滚动

Vue 实现翻页滚动

要实现翻页滚动效果，可以使用 Vue 结合 CSS 和 JavaScript 实现平滑的页面切换效果。以下是几种常见的方法：

使用 CSS Scroll Snap

CSS Scroll Snap 提供了一种原生的方式实现翻页滚动效果，无需额外 JavaScript 逻辑。

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

<style>
.scroll-container {
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

.page {
  height: 100vh;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}
</style>

使用 Vue 结合 JavaScript 动画

如果需要更复杂的动画效果，可以结合 JavaScript 实现平滑滚动。

<template>
  <div ref="container" class="scroll-container">
    <div v-for="(page, index) in pages" :key="index" class="page">
      {{ page }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pages: ["Page 1", "Page 2", "Page 3"],
      currentPage: 0,
    };
  },
  methods: {
    scrollToPage(pageIndex) {
      const container = this.$refs.container;
      const pageHeight = container.clientHeight;
      container.scrollTo({
        top: pageHeight * pageIndex,
        behavior: "smooth",
      });
      this.currentPage = pageIndex;
    },
  },
};
</script>

<style>
.scroll-container {
  height: 100vh;
  overflow-y: scroll;
}

.page {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}
</style>

使用第三方库（如 vue-scroll-snap）

如果需要更丰富的功能，可以使用第三方库如 vue-scroll-snap。

安装：

npm install vue-scroll-snap

使用：

<template>
  <vue-scroll-snap>
    <div class="page">Page 1</div>
    <div class="page">Page 2</div>
    <div class="page">Page 3</div>
  </vue-scroll-snap>
</template>

<script>
import VueScrollSnap from "vue-scroll-snap";

export default {
  components: {
    VueScrollSnap,
  },
};
</script>

<style>
.page {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}
</style>

响应式翻页滚动

如果需要根据屏幕尺寸调整翻页行为，可以结合媒体查询和动态计算。

<template>
  <div ref="container" class="scroll-container">
    <div v-for="(page, index) in pages" :key="index" class="page">
      {{ page }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pages: ["Page 1", "Page 2", "Page 3"],
    };
  },
  mounted() {
    window.addEventListener("resize", this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.handleResize);
  },
  methods: {
    handleResize() {
      // 根据屏幕尺寸调整滚动行为
    },
  },
};
</script>

以上方法可以根据具体需求选择，CSS Scroll Snap 适合简单场景，JavaScript 实现适合需要更多控制的场景，第三方库适合快速集成复杂功能。