vue实现fullpage
Vue 实现 FullPage 效果
安装依赖
使用 vue-fullpage.js 或 vue-fullpage-component 这类现成库可以快速实现全屏滚动效果。通过 npm 或 yarn 安装：
npm install vue-fullpage.js基础配置
在 Vue 项目中引入并注册组件：
import Vue from 'vue'
import VueFullPage from 'vue-fullpage.js'
Vue.use(VueFullPage)基本结构
在模板中使用 <full-page> 组件包裹多个 <div class="section">，每个 section 代表一个全屏页面：
<template>
<full-page :options="options">
<div class="section">第一页内容</div>
<div class="section">第二页内容</div>
<div class="section">第三页内容</div>
</full-page>
</template>配置选项
通过 options 对象控制滚动行为：
export default {
data() {
return {
options: {
licenseKey: 'YOUR_KEY',
scrollingSpeed: 700,
navigation: true,
anchors: ['page1', 'page2', 'page3']
}
}
}
}自定义样式
为每个 section 添加独立样式或背景：
.section {
text-align: center;
font-size: 3em;
}
.section:nth-child(1) {
background-color: #f0f0f0;
}手动控制
通过 ref 调用 API 实现编程式导航：
this.$refs.fullpage.api.moveTo(2); // 跳转到第三页注意事项
- 确保容器高度设置为
100vh - 移动端需测试触摸滚动兼容性
- 复杂内容可能导致性能问题，建议懒加载图片
替代方案
若需更轻量实现，可结合 CSS scroll-snap 和 Vue 指令：
<div v-scroll-snap class="scroll-container">
<div class="page">Page 1</div>
<div class="page">Page 2</div>
</div>配套 CSS：
.scroll-container {
height: 100vh;
overflow-y: scroll;
scroll-snap-type: y mandatory;
}
.page {
height: 100vh;
scroll-snap-align: start;
}
