当前位置：首页 > VUE

vue实现多屏滚动

2026-01-21 06:06:09VUE

Vue 实现多屏滚动

实现多屏滚动效果可以通过 Vue 结合 CSS 和 JavaScript 实现。以下是几种常见的方法：

使用 CSS Scroll Snap

CSS Scroll Snap 提供了一种原生的方式实现分屏滚动，无需额外依赖库。

<template>
  <div class="scroll-container">
    <div class="scroll-page" v-for="page in pages" :key="page.id">
      {{ page.content }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pages: [
        { id: 1, content: "Page 1" },
        { id: 2, content: "Page 2" },
        { id: 3, content: "Page 3" }
      ]
    };
  }
};
</script>

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

.scroll-page {
  scroll-snap-align: start;
  height: 100vh;
}
</style>

使用 Vue 插件（如 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;
}
</style>

自定义滚动逻辑

如果需要完全自定义滚动行为，可以通过监听滚动事件实现。

vue实现多屏滚动

<template>
  <div class="custom-scroll" ref="scrollContainer">
    <div class="page" v-for="page in pages" :key="page.id" ref="pages">
      {{ page.content }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pages: [
        { id: 1, content: "Page 1" },
        { id: 2, content: "Page 2" },
        { id: 3, content: "Page 3" }
      ],
      currentPage: 0
    };
  },
  mounted() {
    this.$refs.scrollContainer.addEventListener("wheel", this.handleScroll);
  },
  beforeDestroy() {
    this.$refs.scrollContainer.removeEventListener("wheel", this.handleScroll);
  },
  methods: {
    handleScroll(e) {
      e.preventDefault();
      const direction = e.deltaY > 0 ? 1 : -1;
      this.currentPage = Math.max(0, Math.min(this.pages.length - 1, this.currentPage + direction));
      this.$refs.pages[this.currentPage].scrollIntoView({ behavior: "smooth" });
    }
  }
};
</script>

<style>
.custom-scroll {
  overflow: hidden;
  height: 100vh;
}

.page {
  height: 100vh;
}
</style>