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文件！！！ 附上相关配置项 方法 回调函数！！！
网友评论