fullpage-vue 技术文档

fullpage-vue 技术文档

vue-fullpage 项目地址: https://gitcode.com/gh_mirrors/vuef/vue-fullpage

fullpage-vue 是一款专为 Vue 2.x 设计的单页滚动插件，兼容移动端和PC端，采用现代前端构建方式，使得在 Vue 应用中实现全屏分段滚动变得轻松简单。以下内容将引导您完成从安装、配置到使用的全过程，并提供详细的 API 参考。

安装指南

要开始使用 fullpage-vue，首先确保您的环境支持 npm 或 yarn，然后执行以下命令来安装插件：

npm install fullpage-vue --save

如果您计划利用 animate.css 的动画效果，还需安装它：

npm install animate.css --save

animate.css 的在线演示地址 这里，可以学习更多动画用法。

项目使用说明

引入样式与注册插件

在项目的入口文件（如 main.js）中，引入插件所需的 CSS 样式并注册插件：

import 'fullpage-vue/src/fullpage.css';
import VueFullpage from 'fullpage-vue';
Vue.use(VueFullpage);

基本使用案例

1. 模板配置:

   在 .vue 文件的 template 部分，使用 v-fullpage 指令定义全屏滚动的行为，并且可以通过 v-animate 实现动画效果。

   <div class="fullpage-container">
     <div class="fullpage-wp" v-fullpage="fullpageOptions" ref="fullpageExample">
       <!-- 页面内容及动画应用 -->
     </div>
   </div>
   

2. 数据与方法:

   在组件的 data 函数中配置 fullpageOptions，并在 methods 定义相关操作方法，如页面跳转。

   export default {
     data() {
       return {
         fullpageOptions: {
           start: 0,
           dir: 'v', // 垂直滚动
           duration: 500,
           beforeChange: (current, next) => console.log('即将切换'),
           afterChange: (current, next) => console.log('已切换'),
         },
       };
     },
     methods: {
       moveToPage(index) {
         this.$refs.fullpageExample.$fullpage.moveTo(index);
       },
       // 可以根据需要添加更多方法，比如调用 moveNext 或其他 API 方法。
     },
   };
   

动画与交互

使用 v-animate 指令时，按照 animate.css 的类名指定动画，如上述示例所示。

项目API使用文档

选项 (Options)

• start: 默认展示的页面索引，默认为 0。
• duration: 切换动画持续时间，默认 500 毫秒。
• loop: 是否开启循环滚动，默认 false。
• dir: 滚动方向，默认 'v' 表垂直，'h' 表水平。
• beforeChange, afterChange: 页面切换的回调函数。

方法 (Methods)

• moveTo: 移动到指定页面。

  this.$refs.fullpageExample.$fullpage.moveTo(pageNumber, animated, force);
  

• movePrev: 上一页。
• moveNext: 下一页。
• setDisabled: 控制是否允许滑动。
• $update: 当DOM结构变化时调用，用于同步更新fullpage状态。

项目安装方式回顾

通过 npm 安装即可快速集成到 Vue 项目中，记得同时考虑 animate.css 的需求进行额外安装，以便充分利用其提供的动画效果。

以上即是 fullpage-vue 的基本使用和配置文档，遵循这些步骤，您将能够顺利集成这款强大的全屏滚动插件至您的Vue应用程序之中，增强用户体验。

vue-fullpage 项目地址: https://gitcode.com/gh_mirrors/vuef/vue-fullpage