vue-fullpage.js的使用

1、安装vue-fullpage，最新版就可以

npm install vue-fullpage -S

2、入口文件main.js引入

import 'fullpage.js/vendors/scrolloverflow'
import VueFullPage from 'vue-fullpage.js/dist/vue-fullpage.js'
import './assets/css/fullpage.min.css'
Vue.use(VueFullPage)

fullpage.min.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 */

3.使用

<template>
  <div>
    <!-- 导航 -->
    <ul id="myMenu">
        <li  :class="{activeColor:index==currentIndex}" @click="changePages(item,index)"  v-for="(item,index) in menus" :key="item.id">
          <a href="javascript:;">{
   
   {item.name}}</a>
        </li>
    </ul>
    <full-page :options="options" ref="fullpage">
      <div class="section">
        <div class="box3" title="哈哈哈"><router-link to="/home">section1</router-link></div>
      </div>
      <div class="section">
        <div class="box3">
           21
        </div>
      </div>
      <div class="section">
        <div class="box3">section3</div>
      </div>
      <div class="section">
        <div class="box3">section4</div>
      </div>
    </full-page>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
       menus:[
           {id:1,name:'section1'},
           {id:2,name:'section2'},
           {id:3,name:'section3'},
           {id:4,name:'section4'}
       ],
      currentIndex:0,
      options: {
        //字体是否随着窗口缩放而缩放
        // resize: true,
        //页面滚动速度
        scrollingSpeed: 700,
        //绑定菜单，设定相关属性和anchors的值对应后，菜单可以控制幻灯片滚动
        menu: "#myMenu",
        //定义锚链接，用户可以快速打开定位到某一页面；不需要加"#"，不要和页面中任意的id和name相同
        // anchors: ["page1", "page2", "page3", "page4"],
        //是否锁定锚链接
        // lockAnchors: true,
        //滚动到最顶部后是否连续滚动到底部
        //loopTop: true,
        //滚动到最底部后是否连续滚动到顶部
        //loopBottom: true,
        //是否显示导航，设为true会显示小圆点作为导航
        navigation: true,
        scrollOverflow: true,
        // 为每个section设置背景色
        sectionsColor: [
          "#41b883",
          "#ff5f45",
          "#0798ec",
          "#fec401",
          "#1bcee6",
          "#ee1a59",
          "#2c3e4f",
          "#ba5be9",
          "#b4b8ab",
        ],
        navigationTooltips: ['page1', 'page2','page3','page4'],   //导航小圆点的提示
        showActiveTooltip: false,   //是否显示当前页面的tooltip信息
	    	//slidesNavigation: true,    //是否显示横向幻灯片的导航，默认为false
		    //slidesNavPosition: 'bottom',   //横向导航的位置，默认为bottom，可以设置为top或bottom
        onLeave:(index,nextIndex,direction)=>{
            this.currentIndex=nextIndex.index           
        },
        afterLoad:function(anchorLink, index){
            // console.log(index);
        },
      },
    };
  },
  created(){
  },
  methods:{
      // 点击导航跳转到对应页面
      changePages(item,index){
          this.$refs.fullpage.api.moveTo(item.id)
          // 添加导航激活样式
          this.currentIndex=index
      },
  },
  mounted(){
    
  }
};
</script>
 
<style scoped>
.box3 {
  text-align: center;
  font-size: 20px;

}
.box3:hover{
      transform: rotate(180deg);
      transition: all .5s;
}
li {
  list-style: none;
}
.activeColor{
    border-bottom: 2px solid #fff;
}
.w {
  width: 1200px;
  margin: 0 auto;
}
* {
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
}
#myMenu {
  height: 50px;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  position: fixed;
  top: 0;
  left: 0;
  right: 300px;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: end;
}

#myMenu li a {
  color: #000;
}
#myMenu li {
  margin-right: 20px;
  padding: 12px;
}
</style>

相关配置项
options:

options: {
        // 为每个section设置背景色
        //sectionsColor: ["#f00","#0f0","#00f"],
        //用来控制slide幻灯片的箭头，设置为false，两侧的箭头会消失
        //controlArrows: false,
        //每一页幻灯片的内容是否垂直居中
        //verticalCentered: false,
        //字体是否随着窗口缩放而缩放
        //resize: true,
        //页面滚动速度
        //scrollingSpeed: 700,
        //定义锚链接，用户可以快速打开定位到某一页面；不需要加"#"，不要和页面中任意的id和name相同
        //anchors: ["page1","page2","page3"],
        //是否锁定锚链接
        //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: true,
        //绑定菜单，设定相关属性和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,
        scrollOverflow: true,
        navigation: true, //是否显示导航，默认为false
        navigationPosition: 'right', //导航小圆点的位置
        scrollBar: false,
        keyboardScrolling: false, //是否可以使用键盘方向键导航，默认为true
        continuousVertical: true, /// 是否循环滚动，默认为false。如果设置为true，则页面会循环滚动，而不像loopTop或loopBottom那样出现跳动，注意这个属性和loopTop、loopBottom不兼容和，不要同时设置
        menu: '#menu',
        // navigation: true,
        // anchors: ['page1', 'page2', 'page3'],
        sectionsColor: [
          '#41b883',
          '#ff5f45',
          '#0798ec',
          '#fec401',
          '#1bcee6',
          '#ee1a59',
          '#2c3e4f',
          '#ba5be9',
          '#b4b8ab'
        ]
      }
    };

vue 调用fullpage方法

this.$refs.fullpage.api.moveSectionDown();
this.$refs.fullpage.init();

// 向上滚动一页
// 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();