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

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

一、man.js引入

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

二、使用

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>

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

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;   }  },}

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怎么实现整屏滚动页面这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！