当前位置：首页 > VUE

vue实现fullpage

2026-03-27 14:54:59VUE

Vue 实现 FullPage 滚动效果

使用 Vue 实现全屏滚动（FullPage）效果可以通过原生开发或借助现有库完成。以下是两种常见方法：

使用 vue-fullpage.js 库

安装 vue-fullpage.js：

npm install vue-fullpage.js --save

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

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

Vue.use(VueFullPage)

在模板中使用：

<template>
  <full-page ref="fullpage" :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,
        navigation: true
      }
    }
  }
}
</script>

<style>
.section {
  height: 100vh;
  width: 100%;
}
</style>

原生实现 FullPage 效果

通过监听滚轮事件和 CSS 过渡实现基础效果：

vue实现fullpage

<template>
  <div class="fullpage-container" ref="container">
    <div 
      v-for="(page, index) in pages" 
      :key="index"
      class="page"
      :style="{ transform: `translateY(${currentIndex * -100}vh)` }"
    >
      {{ page.content }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: 0,
      pages: [
        { content: '第一屏' },
        { content: '第二屏' },
        { content: '第三屏' }
      ],
      isScrolling: false
    }
  },
  mounted() {
    window.addEventListener('wheel', this.handleWheel)
  },
  beforeDestroy() {
    window.removeEventListener('wheel', this.handleWheel)
  },
  methods: {
    handleWheel(e) {
      if (this.isScrolling) return

      this.isScrolling = true

      if (e.deltaY > 0) {
        this.currentIndex = Math.min(this.currentIndex + 1, this.pages.length - 1)
      } else {
        this.currentIndex = Math.max(this.currentIndex - 1, 0)
      }

      setTimeout(() => {
        this.isScrolling = false
      }, 800)
    }
  }
}
</script>

<style>
.fullpage-container {
  overflow: hidden;
  height: 100vh;
}

.page {
  height: 100vh;
  width: 100%;
  transition: transform 0.8s ease;
}
</style>