vue+vue-fullpage实现整屏滚动页面的示例代码(直播平台源码)
更新时间:2022年06月30日 14:37:52 作者:云豹科技-苏凌霄
这篇文章主要介绍了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 > <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整屏滚动页面内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
element的el-tree多选树(复选框)父子节点关联不关联
最近想要实现多选框关联的功能,但是却出现了element的el-tree多选树(复选框)父子节点关联不关联的问题,本文就来介绍一下解决方法,一起来了解一下2021-05-05vue封装可复用组件confirm,并绑定在vue原型上的示例
今天小编就为大家分享一篇vue封装可复用组件confirm,并绑定在vue原型上的示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10Vue3中使用Element Plus时el-icon无法显示的问题解决
我们的Vue前端一般都是用的ElementUI,其中按钮可能用到的比较多,官方里面有自带的一些默认图标,下面这篇文章主要给大家介绍了关于Vue3中使用Element Plus时el-icon无法显示的问题解决,需要的朋友可以参考下2022-03-03
最新评论