vue整屏滚动页面
云豹科技-苏凌霄 人气:0直播平台源码,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 > <h3>vue-fullpage.js</h3> </div> <div > <div > <h3>Slide 2.1</h3> </div> <div > <h3>Slide 2.2</h3> </div> <div > <h3>Slide 2.3</h3> </div> </div> <div > <h3>Section 3</h3> </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); },
加载全部内容