vue+vue-fullpage实现整屏滚动页面的示例代码(直播平台源码)_vue.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: '' })

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

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

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