当前位置：首页 > VUE

vue实现fullpage

2026-01-12 22:15:57VUE

Vue 实现 FullPage 滚动效果

使用 vue-fullpage.js 库

安装 vue-fullpage.js 库，这是一个专为 Vue 设计的全屏滚动插件，基于 fullPage.js 实现。

npm install vue-fullpage.js

在 Vue 项目中引入并注册组件：

import Vue from 'vue'
import VueFullPage from 'vue-fullpage.js'

Vue.use(VueFullPage)

在模板中使用：

vue实现fullpage

<template>
  <full-page :options="options">
    <div class="section">第一屏内容</div>
    <div class="section">第二屏内容</div>
    <div class="section">第三屏内容</div>
  </full-page>
</template>

<script>
export default {
  data() {
    return {
      options: {
        licenseKey: 'YOUR_KEY',
        scrollingSpeed: 700
      }
    }
  }
}
</script>

<style>
.section {
  text-align: center;
  font-size: 3em;
}
</style>

自定义实现全屏滚动

通过监听鼠标滚轮事件和触摸事件，结合 CSS transform 实现基础全屏滚动效果。

创建全屏滚动组件：

vue实现fullpage

<template>
  <div class="fullpage-container" @wheel="handleWheel" @touchstart="handleTouchStart" @touchend="handleTouchEnd">
    <div class="section" v-for="(section, index) in sections" :key="index" :style="{ transform: `translateY(-${currentIndex * 100}%)` }">
      {{ section.content }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: 0,
      sections: [
        { content: '第一屏' },
        { content: '第二屏' },
        { content: '第三屏' }
      ],
      touchStartY: 0
    }
  },
  methods: {
    handleWheel(e) {
      if (e.deltaY > 0 && this.currentIndex < this.sections.length - 1) {
        this.currentIndex++
      } else if (e.deltaY < 0 && this.currentIndex > 0) {
        this.currentIndex--
      }
    },
    handleTouchStart(e) {
      this.touchStartY = e.touches[0].clientY
    },
    handleTouchEnd(e) {
      const touchEndY = e.changedTouches[0].clientY
      if (touchEndY < this.touchStartY && this.currentIndex < this.sections.length - 1) {
        this.currentIndex++
      } else if (touchEndY > this.touchStartY && this.currentIndex > 0) {
        this.currentIndex--
      }
    }
  }
}
</script>

<style>
.fullpage-container {
  overflow: hidden;
  height: 100vh;
}
.section {
  height: 100vh;
  transition: transform 0.5s ease;
}
</style>

使用 CSS scroll-snap

利用现代 CSS 的 scroll-snap 特性实现原生全屏滚动效果，性能较好但浏览器兼容性需要考虑。

<template>
  <div class="scroll-container">
    <div class="section">第一屏</div>
    <div class="section">第二屏</div>
    <div class="section">第三屏</div>
  </div>
</template>

<style>
.scroll-container {
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}
.section {
  height: 100vh;
  scroll-snap-align: start;
}
</style>

结合 Vue Router

实现全屏滚动的同时保持路由状态，适合单页应用场景。

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
    { path: '/contact', component: Contact }
  ],
  scrollBehavior(to, from, savedPosition) {
    if (to.hash) {
      return { selector: to.hash }
    }
    return { x: 0, y: 0 }
  }
})