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演示
 

  • 4
    点赞
  • 26
    收藏
    觉得还不错? 一键收藏
  • 11
    评论
评论 11
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值