【Vue3】项目中实现整屏滚动效果，整屏翻页 fullpage.js

fruge365

发布于 2025-12-15 11:56:07

2370

vue3 + vite 项目中实现整屏滚动、翻页效果。具体效果可以参考：百度视觉技术

首先准备好项目，没有项目或者不会建可以直接克隆准备好的。vite common

参考文章：vue3项目使用fullpage.js

安装

网上有fullpage.js和vue-fullpage.js不知道有什么区别，我先尝试了fullpage.js，需要购买通行证，不然老是报错，随后又试了第二个是可以的，所以记录一下。

yarn add vue-fullpage.js

引入挂载

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

在main.js中注册

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

页面中使用

<template>
  <div id="fullpage">
    <div class="section item1">Section 1</div>
    <div class="section item2">Section 2</div>
    <div class="section item3">Section 3</div>
  </div>
</template>

<script>
import fullpage from "fullpage.js";

export default {
  mounted() {
    new fullpage("#fullpage", {
      licenseKey: "OPEN-SOURCE-GPLV3-LICENSE", // 在此处放入你的许可证密钥
      autoScrolling: true,
      navigation: true,
      scrollBar: true,
    });
  },
};
</script>

<style scoped>
#fullpage {
  height: 100vh;
}
.section {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: black;
  font-size: 25px;
}
.item1 {
  background: #f8d7da; /* 淡粉色 */
}

.item2 {
  background: #d1ecf1; /* 淡蓝色 */
}

.item3 {
  background: #fff3cd; /* 淡黄色 */
}
</style>

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