基于vue项目 实现整屏滚动 -- vue-fullpage 插

vue-fullpage.js 其实是fullpage.js 的vue.js 官方封装的插件。

用法：

  1.安装  

     npm install --save vue-fullpage.js

 2.在main.js中引入

引入vue-fullpage.js

注意：因为vue-fullpage 是基于fullpage的，而fullpage又是基于jQuery的全屏滚动插件，所以操作完以上两步后，我们还缺少一个fullpage.min.css文件，我的做法是将该文件（附上链接）下载下来，放到本地使用。

即 完成以上步骤后，我们在需要用到vue-fullpage的组件中，还需要通过import导入css样式           

    import "../../../static/css/fullpage.min.css"; //整屏滚动样式

3.在组件中使用

3.1  html 结构

<template>

  <div>

    <full-page :options="options" ref="fullpage">

      <div class="section">

            first section

      </div>

      <div class="section footerH">

            second section

      </div>

    </full-page>

  </div>

</template>

3.2 js 结构

data() {

    return {

      options: {//整屏插件vue-fullpage选项

        licenseKey: null,

        verticalCentered: true, //定义每一页的内容是否垂直居中

        afterLoad: this.afterLoad, //滚动到某一屏后的回调函数

        // scrollOverflow: true,//内容超过满屏后显示滚动条

        controlArrows: true, //是否通过箭头控制slide幻灯片

        loopHorizontal: true, //slide幻灯片是否循环滚动

        scrollBar: true, //true则是一滚动就是一整屏

        onLeave: this.onLeave, //滚动前的回调函数，

      },

    };

  }

若是想在某一屏中实现左右滑动的轮播图。则可在该屏中套入一个以slide为类名的div,即：：

有轮播图的html结构

在vue-fullpage 中有一些回调函数和方法，，通过this.$refs.fullpage.api.xxx可调用相关方法。。

附上完整代码截图：

完整代码

注：为了让轮播图实现自动播放效果，使用了定时器，因此可结合beforeRouteLeave钩子函数 在路由离开前进行清除操作

销毁定时器

小技巧：在methods中使用了定时器，为了方便销毁，可在data中return 一个定时器的命名，再通过this.命名可以实现赋值和销毁！！

一些坑：：页面内容不满屏的时候，和上面的内容放一块就太挤，单独放一屏就太空，比如页面的footer部分，对于这个问题，我采用了最简单的处理方法，即给最后一屏加上一个类名 footerH（看上图代码），让最后一屏的高度自适应。。

不满屏处理

此处是参考过的git文件！！！  附上相关配置项 方法 回调函数！！！