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 结构
first section
3.2 js 结构data() {
return {
options: {//整屏插件vue-fullpage选项
licenseKey: null,
verticalCentered: true, //定义每一页的内容是否垂直居中
afterLoad: this.afterLoad, //滚动到某一屏后的回调函数