一，基础实现

以下几个步骤搭建功能。

安装

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 插件。竟然出现这种错误。