公司有个需求是，实现全屏滚动效果，fullpage.js这个插件刚好满足。能一屏幕一屏切换，感觉像轮播图一样。
一，基础实现
以下几个步骤搭建功能。
安装
npm install --save vue-fullpage.js
引用
import VueFullpage from 'vue-fullpage.js';
Vue.use(VueFullpage);使用
<template>
<div>
<full-page class="full-page" ref="fullpage" :options="options">
<div class="section">
<div class="one">
首页（背景图）
</div>
</div>
<div class="section">
<scheme></scheme>
</div>
<div class="section">
<enterprise></enterprise>
</div>
<div class="section">
<aboutUs :show="page4Show"></aboutUs>
</div>
</full-page>
</div>
</template>
<script>
import scheme from "./components/scheme";
import enterprise from './components/enterprise';
import aboutUs from "./components/aboutUs";
export default {
name: 'index',
data() {
return {
options: {
licenseKey: "OPEN-SOURCE-GPLV3-LICENSE",
afterLoad: this.afterLoad,// 当前页面回调
scrollOverflow: true,
scrollBar: false,
menu: "#menu",
// navigation: true,
anchors: ['home', 'scheme', 'enterprise','about'], //定义锚链接
//设置背景颜色
sectionsColor: [
"#fff",
"#fff",
"#e4e4e4",
"#fff",
]
}
}
},
components: {
scheme,
aboutUs,
enterprise,
},
methods: {
moveTo(val) {
// 点击导航栏 跳转到那个屏幕
// 列如： this.$refs.fullpage.api.moveTo('enterprise'); // 跳转到第三屏
this.$refs.fullpage.api.moveTo(val);
},
afterLoad(anchorLink, index) {
if (index.index == 0) {
//第一屏
}else if(index.index == 3) {
// 第四屏
}
}
},
}
}
}
</script>
<style>
</style>使用之后有个报错，虽然不影响功能，挺烦人的
如果不想显示的话,即可在fullpage.js（node_modules）文件中查找licenseKey，删除如下代码（我的代码上设置了，还有报错，目前还在查。---网络上都是这种方法）
if(!isOK){
showError('error', 'Fullpage.js version 3 has changed its license to GPLv3 and it requires a `licenseKey` option. Read about it here:');
showError('error', 'https://github.com/alvarotrigo/fullPage.js#options.');
}删除后将下一行的else也删掉，变成如下代码
if(l && l.length < 20){
console.warn('%c This website was made using fullPage.js slider. More info on the following website:', msgStyle);
console.warn('%c https://alvarotrigo.com/fullPage/', msgStyle);
}以上可以 满足简单需求
二，关于fullpage
fullpage 配置 options
options: {
// 为每个section设置背景色
//sectionsColor: ["#f00","#0f0","#00f"],
//用来控制slide幻灯片的箭头，设置为false，两侧的箭头会消失
//controlArrows: false,
//每一页幻灯片的内容是否垂直居中
//verticalCentered: false,
//字体是否随着窗口缩放而缩放
//resize: true,
//页面滚动速度
//scrollingSpeed: 500,
//定义锚链接，用户可以快速打开定位到某一页面；不需要加"#"，不要和页面中任意的id和name相同
//anchors: ["page1","page2","page3"，"page4"],
//是否锁定锚链接
//lockAnchors: true,
//定义section页面的滚动方式，需要引入jquery.easings插件
//easing:,
//是否使用css3 transform来实现滚动效果
//css3: false,
//滚动到最顶部后是否连续滚动到底部
//loopTop: true,
//滚动到最底部后是否连续滚动到顶部
//loopBottom: true,
//横向slide幻灯片是否循环滚动
//loopHorizontal: false,
//是否循环滚动，不会出现跳动，效果很平滑
//continuousVertical: true,
//是否使用插件滚动方式，设为false后，会出现浏览器自带的滚动条，将不会按页滚动
//autoScrolling: false,
//是否包含滚动条，设为true，则浏览器自带的滚动条会出现，页面还是按页滚动，但是浏览器滚动条默认行为也有效
//scrollBar: true,
//设置每个section顶部的padding，当我们要设置一个固定在顶部的菜单、导航、元素等时使用
//paddingTop: "100px",
//设置每个section底部的padding，当我们要设置一个固定在底部的菜单、导航、元素等时使用
//paddingBottom: "100px",
//固定的元素，为jquery选择器；可用于顶部导航等
//fixedElements: ".nav",
//是否可以使用键盘方向键导航
//keyboardScrolling: false,
//在移动设置中页面敏感性，最大为100，越大越难滑动
//touchSensitivity: 5,
//设为false，则通过锚链接定位到某个页面不再有动画效果
//animateAnchor: false,
//是否记录历史，可以通过浏览器的前进后退来导航
//recordHistory: false,
//绑定菜单，设定相关属性和anchors的值对应后，菜单可以控制幻灯片滚动
//menu: '.nav',
//是否显示导航，设为true会显示小圆点作为导航
//navigation: true,
//导航小圆点的位置，可以设置为left或者right
//navigationPosition: right,
//鼠标移动到小圆点上时显示出的提示信息
//navigationTooltips: ["第一页","第二页","第三页","第四页"],
//是否显示当前页面小圆点导航的提示信息，不需要鼠标移上
//showActiveTooltip: true,
//是否显示横向幻灯片的导航
//slidesNavigation: true,
//横向幻灯片导航的位置，可以为top或者bottom
//slidesNavPosition: bottom,
//内容超过满屏时是否显示滚动条，需要jquery.slimscroll插件
//scrollOverflow: true,
//section选择器
//sectionSelector: ".section",
//slide选择器
//slideSelector: ".slide"
licenseKey: 'OPEN-SOURCE-GPLV3-LICENSE',
afterLoad: this.afterLoad,
}
};vue 调用 fullpapge 的属性
// 向上滚动一页
// moveSectionUp();
//向下滚动一页
// moveSectionDown();
//滚动到第几页，第几个幻灯片；页面从1计算，幻灯片从0计算
// moveTo(wection,slide);
//和moveTo一样，但是没有动画效果
// silentMoveTo(section,slide);
//幻灯片向右滚动
// moveSlideRight();
//幻灯片向左滚动
// moveSlideLeft();
//动态设置autoScrolling配置项
// setAutoScrolling(boolean);
//动态设置lockAnchors配置项
// setLockAnchors(boolean);
//动态设置recordHistory配置项
// setRecordHistory(boolean);
//动态设置scrollingSpeed配置项
// setScrollingSpeed(milliseconds);
//添加或删除鼠标/滑动控制，第一个参数为启用、禁用；第二个参数为方向，取值包含all、up、dowm、left、right，可以使用多个，逗号分隔
// setAllowScrolling(boolean,[directions]);
//销毁fullpage特效，不写type，fullpage给页面添加的样式和html元素还在；如果使用all，则样式和html等全部被销毁
// destroy(type);
//重新更新页面和尺寸，用于通过ajax请求后改变了页面结构之后，重建效果
// reBuild();使用方法：
// 调转到 enterprise锚点 这个一屏
this.$refs.fullpage.api.moveTo('enterprise')三，动画
全屏的屏幕只有背景图和文字，有点单调，话不多说，搞他
雄赳赳气昂昂 写完第一屏动画效果，感觉不错，当我写完第二屏动画效果时，遇到难题了，
我刷新一下，第一屏动画没有什么毛病，当我切换到第二屏，我的动画效果没有显示，懵逼。。 （检查-->代码有没有报错-->css 动画代码）都没有问题 当我把第二屏动画效果时间延长6s, 刷新 到第二屏 -->有动画没问题
原因： 动画都在一个页面，无论分几屏都是一个页面，动画同时加载
需求： 我切换到那个屏幕，当前动画开始加载，刷新，前进，后退，保持当前动画重新加载，其他页面关闭
我灵光一闪，打通任督二脉，运用 if 和 fullpage的属性 afterLoad 完美使用， （目前只想到这点，如果有更好的方法欢迎大佬留言）
v-if由于每次都会重新删除或创建元素，(有较高的切换性能消耗)。
把所有有动画的页面 的 "盒子" 都是用 v-if="false", 当我切换到当前页 v-if="true", 其他为false
methods: { moveTo(val) { this.$refs.fullpage.api.moveTo(val); }, afterLoad(anchorLink, index) { this.page1Show = false this.page4Show = false if (index.index == 0) { //第一屏 this.page1Show = true; }else if(index.index == 3) { // 第四屏 this.page4Show = true } }, getData() { // 查询 } },如果对整个子组件使用v-if 会出现闪屏
四.扩展
这个项目我使用了 swiper 插件， 除了ie 浏览器 没有调试，其他浏览器没有什么问题，当时以为没有什么问题， 你已经猜到了， 我整个项目在ie 浏览器 白屏了，报了一堆错。心累
swiper 版本过高导致，我把版本降低就好了。我是用很多次swiper 插件。竟然出现这种错误。
