vue使用fullpage.js

要在 Vue.js 项目中使用 fullpage.js，可以使用 Vue-fullpage.js 插件。下面是一个简单的使用示例：

1. 安装 Vue-fullpage.js

使用 npm 或 yarn 安装 Vue-fullpage.js：

npm install vue-fullpage.js

或者

yarn add vue-fullpage.js

2. 在 Vue.js 项目中引入 Vue-fullpage.js

在 main.js 中引入 Vue-fullpage.js：

import Vue from 'vue'
import VueFullpage from 'vue-fullpage.js'

Vue.use(VueFullpage)

3. 创建 fullpage 组件

在组件中使用 `<vue-fullpage>` 标签创建 fullpage 组件，然后在组件的 data 中定义页面：

<template>
  <div>
    <vue-fullpage :options="options">
      <div class="section">
        <h1>Page 1</h1>
      </div>
      <div class="section">
        <h1>Page 2</h1>
      </div>
      <div class="section">
        <h1>Page 3</h1>
      </div>
    </vue-fullpage>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: {
        sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE']
      }
    }
  }
}
</script>

在这个示例中，我们创建了一个 fullpage 组件，定义了三个页面，每个页面都是一个 `<div>` 元素，并设置了页面的颜色。

4. 配置和使用 fullpage.js

可以在组件的 data 中设置 fullpage.js 的配置参数，例如页面滚动的速度、页面的动画效果、是否循环滚动等。可以在 options 对象中设置 fullpage.js 的配置参数，例如：

data() {
  return {
    options: {
      sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE'],
      scrollingSpeed: 1000,
      easingcss3: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)',
      loopBottom: true,
      loopTop: true,
      anchors: ['page1', 'page2', 'page3']
    }
  }
}

可以使用 fullpage.js 提供的钩子函数，例如：

data() {
  return {
    options: {
      afterLoad: function(origin, destination, direction) {
        console.log('afterLoad', origin.index, destination.index, direction)
      },
      onLeave: function(origin, destination, direction) {
        console.log('onLeave', origin.index, destination.index, direction)
      }
    }
  }
}

在这个示例中，我们定义了 `afterLoad` 和 `onLeave` 两个钩子函数，分别在页面滚动到新页面之后和离开当前页面之前执行。这些钩子函数可以用来执行一些特定的操作，例如修改页面标题、添加动画效果等。

这样就可以在 Vue.js 项目中使用 fullpage.js 了。