vue实现多屏滚动
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>自定义滚动逻辑
如果需要完全自定义滚动行为，可以通过监听滚动事件实现。
<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>注意事项
- 移动端适配可能需要额外处理触摸事件。
- 性能优化：对于复杂页面，考虑使用
IntersectionObserver替代滚动事件监听。 - 浏览器兼容性：CSS Scroll Snap 在现代浏览器中支持良好，但旧版本可能需要前缀。
