vue实现fullpage

使用 vue-fullpage.js 实现全屏滚动

vue-fullpage.js 是一个基于 fullPage.js 的 Vue 组件，专门用于实现全屏滚动效果。

安装依赖：

npm install vue-fullpage.js

在 Vue 项目中引入：

import 'fullpage.js/vendors/scrolloverflow' // 可选，支持内容超出时滚动
import VueFullPage from 'vue-fullpage.js'
Vue.use(VueFullPage)

基本用法：

<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_HERE',
        scrollOverflow: true,
        navigation: true,
        anchors: ['page1', 'page2', 'page3']
      }
    }
  }
}
</script>

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

使用原生 Vue 实现简易全屏滚动

如果不希望依赖第三方库，可以通过原生 Vue 实现基本功能：

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

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

      this.isScrolling = true
      if (e.deltaY > 0 && this.currentIndex < this.sections.length - 1) {
        this.currentIndex++
      } else if (e.deltaY < 0 && this.currentIndex > 0) {
        this.currentIndex--
      }

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

<style>
.fullpage-container {
  height: 100vh;
  overflow: hidden;
}
.section {
  height: 100vh;
  transition: transform 0.8s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2em;
}
</style>

使用 vue-scroll-snap 实现

vue-scroll-snap 是另一个轻量级解决方案：

安装：

npm install vue-scroll-snap

使用示例：

<template>
  <vue-scroll-snap :fullscreen="true">
    <div class="item">第一屏</div>
    <div class="item">第二屏</div>
    <div class="item">第三屏</div>
  </vue-scroll-snap>
</template>

<script>
import VueScrollSnap from 'vue-scroll-snap'
import 'vue-scroll-snap/dist/vue-scroll-snap.css'

export default {
  components: {
    VueScrollSnap
  }
}
</script>

<style>
.item {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2em;
}
</style>

性能优化建议

全屏滚动效果需要注意性能优化：

• 避免在每屏中使用大量复杂动画

  

• 对图片使用懒加载

• 使用 will-change 属性优化渲染性能

  .section {
  will-change: transform;
  }

• 考虑移动端触摸事件支持

• 添加防抖机制避免快速滚动导致的性能问题