Vue-fullpage.js 使用教程：创建全屏滚动网站

Vue-fullpage.js 是 fullPage.js 的官方 Vue.js 3 包装器，用于创建全屏滚动网站（单页应用程序）。该库提供垂直和水平滚动、自定义导航和滚动条等功能，让开发者能够轻松在 Vue 项目中集成全屏滚动效果。

安装与配置

安装依赖

通过 npm 安装 Vue-fullpage.js：

npm install vue-fullpage.js

引入与使用

在 Vue 项目中引入并使用 Vue-fullpage.js：

import { createApp } from 'vue'
import App from './App.vue'

import 'vue-fullpage.js/dist/style.css'
import VueFullPage from 'vue-fullpage.js'

const app = createApp(App)
app.use(VueFullPage)
app.mount('#app')

基础用法

基本组件结构

在 Vue 组件中使用 <full-page> 组件：

<template>
  <div>
    <full-page ref="fullpage" :options="options" id="fullpage">
      <div class="section">第一部分内容</div>
      <div class="section">第二部分内容</div>
      <div class="section">第三部分内容</div>
    </full-page>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: {
        licenseKey: 'YOUR_KEY_HERE',
        menu: '#menu',
        anchors: ['page1', 'page2', 'page3'],
        sectionsColor: ['#41b883', '#ff5f45', '#0798ec'],
      },
    }
  }
}
</script>

配置选项

Vue-fullpage.js 支持所有 fullPage.js 的配置选项，包括：

• licenseKey: 许可证密钥（必需）
• menu: 导航菜单选择器
• anchors: 各部分的锚点名称
• sectionsColor: 各部分的背景颜色
• navigation: 是否显示导航点
• scrollBar: 是否显示滚动条

高级功能

动态内容操作

Vue-fullpage.js 支持动态添加和删除内容部分：

// 添加新部分
addSection(e) {
  e.preventDefault()
  const newSectionNumber = document.querySelectorAll('.fp-section').length + 1
  
  // 创建新部分
  const section = document.createElement('div')
  section.className = 'section'
  section.innerHTML = `<h3>Section ${newSectionNumber}</h3>`
  
  // 添加到DOM
  document.querySelector('#fullpage').appendChild(section)
  
  // 更新锚点
  this.options.anchors.push(`page${newSectionNumber}`)
  
  // 重新构建
  this.$refs.fullpage.build()
}

方法调用

可以通过 ref 访问 fullPage.js 的方法：

<template>
  <div>
    <full-page ref="fullpage" :options="options">
      <div class="section">
        <button @click="$refs.fullpage.api.moveSectionDown()">
          下一部分
        </button>
        第一部分内容
      </div>
      <div class="section">
        <button @click="$refs.fullpage.api.moveSectionUp()">
          上一部分
        </button>
        第二部分内容
      </div>
    </full-page>
  </div>
</template>

事件处理

支持 fullPage.js 的所有事件回调：

export default {
  data() {
    return {
      options: {
        afterLoad: this.afterLoad,
        onLeave: this.onLeave,
      },
    }
  },
  methods: {
    afterLoad(origin, destination, direction) {
      console.log('部分加载完成:', destination.anchor)
    },
    onLeave(origin, destination, direction) {
      console.log('离开部分:', origin.anchor)
    },
  },
}

实际应用示例

产品介绍页面

<template>
  <div id="app">
    <ul id="menu">
      <li data-menuanchor="home"><a href="#home">首页</a></li>
      <li data-menuanchor="features"><a href="#features">功能</a></li>
      <li data-menuanchor="pricing"><a href="#pricing">价格</a></li>
      <li data-menuanchor="contact"><a href="#contact">联系</a></li>
    </ul>

    <full-page :options="options" ref="fullpage">
      <div class="section">
        <h1>欢迎使用我们的产品</h1>
        <p>创新的解决方案为您带来卓越体验</p>
      </div>
      <div class="section">
        <h2>核心功能</h2>
        <ul>
          <li>功能一：高效性能</li>
          <li>功能二：易于使用</li>
          <li>功能三：全面支持</li>
        </ul>
      </div>
      <div class="section">
        <h2>价格方案</h2>
        <div class="pricing-plans">
          <div class="plan">基础版</div>
          <div class="plan">专业版</div>
          <div class="plan">企业版</div>
        </div>
      </div>
      <div class="section">
        <h2>联系我们</h2>
        <p>邮箱：[e-mail]</p>
        <p>电话：[phone]</p>
      </div>
    </full-page>
  </div>
</template>

最佳实践

1. 许可证管理：确保使用有效的许可证密钥，商业用途需要购买商业许可证

2. 性能优化：避免在每个部分加载过多资源，保持页面加载速度

3. 响应式设计：确保网站在不同设备上都能正常显示

4. SEO优化：虽然单页应用对SEO不友好，但可以通过服务端渲染等方式改善

5. 用户体验：提供清晰的导航指示，让用户了解当前所在位置

故障排除

常见问题

1. 内容不显示：检查是否正确引入了CSS样式文件
2. 滚动失效：确认许可证密钥是否正确配置
3. 动态内容不更新：确保在DOM更改后调用 build() 方法

调试技巧

// 在控制台检查fullPage.js实例
console.log(this.$refs.fullpage.api)

// 检查当前状态
console.log('当前部分:', this.$refs.fullpage.api.getActiveSection().anchor)

Vue-fullpage.js 为Vue开发者提供了强大的全屏滚动功能，通过合理的配置和使用，可以创建出视觉效果出色的单页应用程序。结合Vue的响应式特性，能够构建出既美观又功能丰富的网站体验。