vue+vue-fullpage怎么实现整屏滚动页面

这篇文章主要讲解了“vue+vue-fullpage怎么实现整屏滚动页面”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“vue+vue-fullpage怎么实现整屏滚动页面”吧！

一、man.js引入

// An highlighted block
import router from './router'
Vue.config.productionTip = false
// 整屏滚动
import 'fullpage.js/vendors/scrolloverflow';
import VueFullPage from 'vue-fullpage.js';
Vue.use(VueFullPage)
/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 components: { App },
 template: '<App/>'
})

二、使用

1.html，

<template>
 <div>
  <full-page :options="options" id="fullpage" ref="fullpage">
   <div >
    <h4>vue-fullpage.js</h4>
   </div>
   <div >
    <div >
     <h4>Slide 2.1</h4>
    </div>
    <div >
     <h4>Slide 2.2</h4>
    </div>
    <div >
     <h4>Slide 2.3</h4>
    </div>
   </div>
   <div >
    <h4>Section 3</h4>
   </div>
  </full-page>
 </div>
</template>

2.js

export default {
 data() {
  return {
   options: {
    anchors: ["page1", "page2", "page3", "page4", "page5", "page6"],
    licenseKey: "OPEN-SOURCE-GPLV3-LICENSE",
    afterLoad: this.afterLoad, // method中的方法 即回调函数
    scrollOverflow: true,
    scrollBar: false,
    menu: "#menu",
    sectionsColor: [
     "#23A84A",
     "#ff5f45",
     "#0798ec",
     "#fec401",
     "#000000",
     "#E7EFFE",
    ],
   },
  };
 },
}

三、常用API

1.afterLoad:对应的函数写在methods中，常用作对页面的处理

methods:{
afterLoad: function (origin, destination, direction) {
    // origin 起点 destination终点 direction方向 固定写法
   this.navIndex = destination.index;
   //destination.index代表对应页面index(从0开始)
   //拿到对应页面的index就可以进行操作
   if (destination.index > 0) {
    this.phoneShow = true;
   }
   if (destination.index === 0) {
    this.phoneShow = false;
   }
  },
}

2.moveTo通过事件跳转到对应的page页面

 options: {
    afterLoad: this.afterLoad,
    //一定要在options中插入这段数组，数组的值对应page页面
    anchors: ["page1", "page2", "page3", "page4", "page5", "page6"],
    licenseKey: "OPEN-SOURCE-GPLV3-LICENSE",
    afterLoad: this.afterLoad, // method中的方法 即回调函数
    scrollOverflow: true,
    scrollBar: false,
    menu: "#menu",
    sectionsColor: [
     "#23A84A",
     "#ff5f45",
     "#0798ec",
     "#fec401",
     "#000000",
     "#E7EFFE",
    ],
   },
moveTo(pages) {
//固定写法,第一个参数代表options中anchors数组中的值
//在点击时传递对应的pages值即可
   fullpage_api.moveTo(pages, 1);
  },

感谢各位的阅读，以上就是“vue+vue-fullpage怎么实现整屏滚动页面”的内容了，经过本文的学习后，相信大家对vue+vue-fullpage怎么实现整屏滚动页面这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！