Vue中使用fullpage.js实现全屏滚动（基础演示）

安装

npm install --save vue-fullpage.js

引用

import VueFullpage from 'vue-fullpage.js'
Vue.use(VueFullpage)

使用

<template>
    <div>
        <full-page :options="options">
            <div class="section">
                <div class="box1">
                   section1
                </div>
            </div>
            <div class="section">
                <div class="box2">
                section2
                </div>
            </div>
            <div class="section">
                <div class="box3">
                section3
                </div>
            </div>
        </full-page>
    </div>
</template>
 
<script>
export default {
    name: '',
    data () {
        return {
            options: {
                licenseKey: "OPEN-SOURCE-GPLV3-LICENSE",
                afterLoad: this.afterLoad,
                scrollOverflow: true,
                scrollBar: false,
                menu: "#menu",
                // navigation: true,
                // anchors: ['page1', 'page2', 'page3'],
                sectionsColor: [
                  "#41b883",
                  "#ff5f45",
                  "#0798ec",
                  "#fec401",
                  "#1bcee6",
                  "#ee1a59",
                  "#2c3e4f",
                  "#ba5be9",
                  "#b4b8ab"
                ]
              }
        }
    }
}
</script>
 
<style>
 
</style>

下面是在使用时报错，只是因为密钥而已，这个错误其实没有任何影响。

如果不想显示的话,即可在fullpage.js文件中查找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);
}

附：jQuery全屏滚动插件fullPage.js演示