vue实现pc全屏滚动
实现PC全屏滚动的Vue方案
在Vue中实现全屏滚动效果，可以通过原生CSS结合Vue指令或使用第三方库完成。以下是两种常见方法：
使用原生CSS和Vue指令
通过CSS的height: 100vh实现全屏区块，配合Vue监听滚动事件切换页面：
<template>
<div class="fullscreen-container" @wheel="handleWheel">
<div
v-for="(section, index) in sections"
:key="index"
class="fullscreen-section"
:class="{ 'active': currentIndex === index }"
>
{{ section.content }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
currentIndex: 0,
sections: [
{ content: '第一屏' },
{ content: '第二屏' },
{ content: '第三屏' }
],
isScrolling: false
}
},
methods: {
handleWheel(e) {
if (this.isScrolling) return;
this.isScrolling = true;
if (e.deltaY > 0 && this.currentIndex < this.sections.length - 1) {
this.currentIndex++;
} else if (e.deltaY < 0 && this.currentIndex > 0) {
this.currentIndex--;
}
setTimeout(() => {
this.isScrolling = false;
}, 800);
}
}
}
</script>
<style>
.fullscreen-container {
overflow: hidden;
}
.fullscreen-section {
height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
transition: transform 0.8s ease;
}
</style>使用第三方库vue-fullpage.js
对于更复杂的需求（如动画、锚点导航），推荐使用专为Vue设计的全屏滚动库：
-
安装依赖：
npm install vue-fullpage.js --save -
基础实现：
<template> <full-page :options="options" ref="fullpage"> <div class="section">第一屏内容</div> <div class="section">第二屏内容</div> <div class="section">第三屏内容</div> </full-page> </template>
export default { components: { 'full-page': VueFullPage }, data() { return { options: { menu: '#navigation', anchors: ['page1', 'page2', 'page3'], sectionsColor: ['#41b883', '#ff5f45', '#0798ec'], navigation: true, scrollBar: false } } } }
性能优化建议
- 使用
transform代替top/left定位实现动画，触发GPU加速 - 对图片等资源进行懒加载，避免首屏加载过多内容
- 移动端需添加touch事件支持
- 考虑节流（throttle）处理滚动事件，避免过度触发
常见问题解决
滚动不流畅
检查是否有多余的CSS属性限制，如overflow: hidden未正确设置，或存在复杂的DOM结构影响渲染性能。
导航点位置偏移
确保父容器没有额外的padding或margin，全屏区块应直接作为body的子元素。
移动端适配
需额外处理touch事件，并考虑禁用浏览器默认的滚动行为：
document.addEventListener('touchmove', function(e) {
e.preventDefault();
}, { passive: false });
