vue3项目使用fullpage.js

其实网上搜索能搜索到很多了，发布这篇文章主要是有些问题搜索一圈没找到答案，做一个合集解惑顺便做一个记录参考

vue3项目配置：

第一步： 安装

还有个vue-fullpage，不知道这两个有什么区别，好像可以混用。不清楚这两个有啥区别，我两个都安装了。 可以明确的一点，只用vue-fullpage也是可以的

npm install fullpage.js
npm install vue-fullpage.js

第二步： 引入挂载

这个scrollOverflow选项是啥东西，我看官方文档上使用教程上也有写，但是引入报错

import VueFullPage from 'vue-fullpage.js'
// import 'fullpage.js/vendors/scrolloverflow' // 如果需要使用scrollOverflow选项，需要引入此文件
import 'fullpage.js/dist/fullpage.min.css' // 引入fullpage.js的样式文件
const app = createApp(App)
app.use(VueFullPage)

第三步：页面中使用

<template>
    <fullPage :options="state.options">
        <div class="section" >
            每个fullpage的子元素添加上 class='section'，就代表是一个分页，在元素内部，可以写自己的页面
        </div>
        <div class="section" >
        </div>
    </fullPage>
</template>

const state = reactive({
    options: {
            // licenseKey: 'OPEN-SOURCE-GPLV3-LICENSE',// 购买了key可以填，
        menu: '#menu',
        anchors: ['page1', 'page2', 'page3', 'page4', 'page5', 'page6'], // 每一个分页的id，页面滚动时可观察地址栏发生变化
        
        // 下面这两个配置是开始视差滚动效果的，但怎么试都没开启成功
        //parallax: true,
        //parallaxOptions: {
            //type: 'reveal',
            //percentage: 62,
            //property: 'translate'
        //}
    },
})

这里就完了，可以打开页面滚动查看效果了

还是有疑惑？点击： vue 中使用 vue-fullpage - 月山 - 博客园 (cnblogs.com)