实现全屏滚动项目（有实例） vue-fullpage.js

本文主要是介绍实现全屏滚动项目（有实例） vue-fullpage.js，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

公司要换官网，需要用到满屏滚动，有竖向也有横向，这个用fullpages.js和swiper.js都可以实现，最后选了fullpages.js。

项目实际应用demo地址：

有pc端和移动端，分别用电脑和手机浏览器访问下面网址就能看到效果

http://www.ichinae.com/#/

实现：
1，安装：

npm install --save vue-fullpage.js

2，引用：

import 'fullpage.js/vendors/scrolloverflow';
import VueFullPage from 'vue-fullpage.js';
Vue.use(VueFullPage);

在public下面的index.html引入：

<!--全屏滚动插件-vue-fullpage.js的样式-->
<link rel="stylesheet" type="text/css" href="https://unpkg.com/fullpage.js/dist/fullpage.min.css">

3，页面

每个 section 代表一屏，默认显示“第一屏”，如果要指定加载页面时显示的“屏幕”，可以在对应的 section 加上 class=”active”，同时，可以在 section 内加入 slide，slide代表横向多屏

具体的配置项可以参考：https://www.dowebok.com/77.html

<full-page :options="options" ref="page"><div class="section"><div class="slide">slide1</div><div class="slide">slide2</div><div class="slide">slide3</div></div><div class="section">section2</div>
</full-page>

data () {return {options: {// keylicenseKey: 'OPEN-SOURCE-GPLV3-LICENSE',// 是否显示导航，默认为falsenavigation: true,// 是否显示横向幻灯片的导航slidesNavigation: true,// 横向幻灯片导航的位置，可以为top或者bottomslidesNavPosition: 'bottom',// 横向slide幻灯片是否循环滚动loopHorizontal: true,// 用来控制slide幻灯片的箭头，设置为false，两侧的箭头会消失controlArrows: false,// 是否循环滚动，不会出现跳动，效果很平滑// continuousVertical: true,// 是否使用插件滚动方式，设为false后，会出现浏览器自带的滚动条，将不会按页滚动// autoScrolling: true,// 设置每个section底部的padding，当我们要设置一个固定在底部的菜单、导航、元素等时使用// paddingBottom: '0',// 滚动到某一屏的回调// afterLoad: this.afterLoad// onLeave: this.onLeave}}}

这时候一般会报错，是因为密钥的问题，这个错误其实没有任何影响。不用理会。
在这里插入图片描述
一般首屏如果有横向滚动，就会加入定时器，让自动滚动，类似轮播图，方法举例：

this.time = setInterval(() => {this.$refs.page.api.moveSlideRight() // 向右滚动}, 15000)

离开页面的时候一定要记得销毁定时器：

destroyed () {clearInterval(this.time)}

重点中的重点：
如果你要做官网，就像我这个项目，页面最下面有页脚，页脚高度占不到整屏，所以要借上一屏的一部分，这时候只要加入fp-auto-height就好，高度自适应。

<div class="section fp-auto-height"><Footer></Footer></div>

在这里插入图片描述
除此以外还有很多细节，如滚动条，导航栏样式之类的，视频做为背景，从别的页面切入后视频不再继续播放的问题，包括视频下载过程中用一张图片代替视频等等，可以私信我。

注意：如果是移动端，那么还要引入一个css文件，文件内容：

/*!* fullPage 3.0.5* https://github.com/alvarotrigo/fullPage.js** @license GPLv3 for open source use only* or Fullpage Commercial License for commercial use* http://alvarotrigo.com/fullPage/pricing/** Copyright (C) 2018 http://alvarotrigo.com/fullPage - A project by Alvaro Trigo*/.fp-enabled body,html.fp-enabled{margin:0;padding:0;overflow:hidden;-webkit-tap-highlight-color:rgba(0,0,0,0)}.fp-section{position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.fp-slide{float:left}.fp-slide,.fp-slidesContainer{height:100%;display:block}.fp-slides{z-index:1;height:100%;overflow:hidden;position:relative;-webkit-transition:all .3s ease-out;transition:all .3s ease-out}.fp-section.fp-table,.fp-slide.fp-table{display:table;table-layout:fixed;width:100%}.fp-tableCell{display:table-cell;vertical-align:middle;width:100%;height:100%}.fp-slidesContainer{float:left;position:relative}.fp-controlArrow{-webkit-user-select:none;-moz-user-select:none;-khtml-user-select:none;-ms-user-select:none;position:absolute;z-index:4;top:50%;cursor:pointer;width:0;height:0;border-style:solid;margin-top:-38px;-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.fp-controlArrow.fp-prev{left:15px;width:0;border-width:38.5px 34px 38.5px 0;border-color:transparent #fff transparent transparent}.fp-controlArrow.fp-next{right:15px;border-width:38.5px 0 38.5px 34px;border-color:transparent transparent transparent #fff}.fp-scrollable{overflow:hidden;position:relative}.fp-scroller{overflow:hidden}.iScrollIndicator{border:0!important}.fp-notransition{-webkit-transition:none!important;transition:none!important}#fp-nav{position:fixed;z-index:100;margin-top:-32px;top:50%;opacity:1;-webkit-transform:translate3d(0,0,0)}#fp-nav.fp-right{right:17px}#fp-nav.fp-left{left:17px}.fp-slidesNav{position:absolute;z-index:4;opacity:1;-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0);left:0!important;right:0;margin:0 auto!important}.fp-slidesNav.fp-bottom{bottom:17px}.fp-slidesNav.fp-top{top:17px}#fp-nav ul,.fp-slidesNav ul{margin:0;padding:0}#fp-nav ul li,.fp-slidesNav ul li{display:block;width:14px;height:13px;margin:7px;position:relative}.fp-slidesNav ul li{display:inline-block}#fp-nav ul li a,.fp-slidesNav ul li a{display:block;position:relative;z-index:1;width:100%;height:100%;cursor:pointer;text-decoration:none}#fp-nav ul li a.active span,#fp-nav ul li:hover a.active span,.fp-slidesNav ul li a.active span,.fp-slidesNav ul li:hover a.active span{height:12px;width:12px;margin:-6px 0 0 -6px;border-radius:100%}#fp-nav ul li a span,.fp-slidesNav ul li a span{border-radius:50%;position:absolute;z-index:1;height:4px;width:4px;border:0;background:#333;left:50%;top:50%;margin:-2px 0 0 -2px;-webkit-transition:all .1s ease-in-out;-moz-transition:all .1s ease-in-out;-o-transition:all .1s ease-in-out;transition:all .1s ease-in-out}#fp-nav ul li:hover a span,.fp-slidesNav ul li:hover a span{width:10px;height:10px;margin:-5px 0 0 -5px}#fp-nav ul li .fp-tooltip{position:absolute;top:-2px;color:#fff;font-size:14px;font-family:arial,helvetica,sans-serif;white-space:nowrap;max-width:220px;overflow:hidden;display:block;opacity:0;width:0;cursor:pointer}#fp-nav ul li:hover .fp-tooltip,#fp-nav.fp-show-active a.active+.fp-tooltip{-webkit-transition:opacity .2s ease-in;transition:opacity .2s ease-in;width:auto;opacity:1}#fp-nav ul li .fp-tooltip.fp-right{right:20px}#fp-nav ul li .fp-tooltip.fp-left{left:20px}.fp-auto-height .fp-slide,.fp-auto-height .fp-tableCell,.fp-auto-height.fp-section{height:auto!important}.fp-responsive .fp-auto-height-responsive .fp-slide,.fp-responsive .fp-auto-height-responsive .fp-tableCell,.fp-responsive .fp-auto-height-responsive.fp-section{height:auto!important}.fp-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/*# sourceMappingURL=fullpage.min.css.map */