vue+vue-fullpage实现整屏滚动页面的示例代码(直播平台源码)

vue+vue-fullpage实现整屏滚动页面的示例代码(直播平台源码)

目录

一、man.js引入

二、使用

三、常用API

直播平台源码,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); },

到此这篇关于vue+vue-fullpage实现整屏滚动页面的文章就介绍到这了,更多相关vue整屏滚动页面内容请搜索易知道(ezd.cc)以前的文章或继续浏览下面的相关文章希望大家以后多多支持易知道(ezd.cc)!

推荐阅读

    查看配置:酷睿i3530集展示办公平台

    查看配置:酷睿i3530集展示办公平台,,由于时间和精力的关系,我们不可能对所有的配置进行评论,希望我们能理解,我希望我们的评论能在那些需要帮

    AMD平台专业术语

    AMD平台专业术语,,1. AMD VISION技术 AMD公司曾经发布过的一份调查报告显示,消费者推迟购买硬件是由于他们对PC术语感到困惑。因此,AMD公

    玩家体验:建立AMD超频平台的选择

    玩家体验:建立AMD超频平台的选择,,目前,65nm的Athlon 64 X2处理器是非常受欢迎的,这主要是由于处理器的高性价比和优秀的超频能力。也许你会

    H61、Z68平台的性能比较

    H61、Z68平台的性能比较,,预算分配选择DIY游戏玩家在面对问题时每个安装,买一个好的CPU和害怕搭配主板太烂,影响性能发挥,甚至浪费CPUDIY,是很

    苹果快捷键左右滚动|苹果移动快捷键

    苹果快捷键左右滚动|苹果移动快捷键,,1. 苹果移动快捷键AUTOCAD中有很多快捷键,快捷键也可以自己设置,如不自己设置即为默认的快捷键,CAD中移