fullPage.jsfullPage.js 一个满屏滚动插件，但是使用需要收费。有相关框架的扩展，比如 vue-fu

fullPage.js 一个满屏滚动插件，但是使用需要收费。
有相关框架的扩展，比如 vue-fullpage.js

npm install --save vue-fullpage.js

引入

// 全屏滚动 vue-fullpage.js
import VueFullPage from 'vue-fullpage.js'

createApp(App)
    .use(VueFullPage)
    .mount('#app')

<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 setup>
  const options = {
    licenseKey: 'OPEN-SOURCE-GPLV3-LICENSE',
    scrollOverflow: true,
    scrollBar: false,
    menu: '#menu',
    // navigation: true,
    // anchors: ['page1', 'page2', 'page3'],
    sectionsColor: ['#41b883', '#ff5f45', '#0798ec', '#fec401', '#1bcee6', '#ee1a59', '#2c3e4f', '#ba5be9', '#b4b8ab']
  }
</script>