当前位置：首页 > VUE

vue动画实现全屏滚动

2026-02-23 13:12:12VUE

vue实现全屏滚动动画的方法

使用Vue实现全屏滚动动画可以通过多种方式完成，以下是几种常见的方法：

使用vue-fullpage.js

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

安装依赖：

npm install vue-fullpage.js

基本用法：

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

<script>
import fullPage from 'vue-fullpage.js'

export default {
  components: {
    fullPage
  },
  data() {
    return {
      options: {
        navigation: true,
        scrollBar: true
      }
    }
  }
}
</script>

使用原生CSS和Vue过渡

可以通过Vue的过渡系统结合CSS实现简单的全屏滚动效果。

<template>
  <div class="fullpage-container">
    <transition :name="transitionName">
      <div 
        v-for="(page, index) in pages" 
        :key="index"
        v-show="currentPage === index"
        class="page"
      >
        {{ page.content }}
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 0,
      transitionName: 'slide-up',
      pages: [
        { content: '第一屏内容' },
        { content: '第二屏内容' },
        { content: '第三屏内容' }
      ]
    }
  },
  methods: {
    nextPage() {
      if (this.currentPage < this.pages.length - 1) {
        this.transitionName = 'slide-up'
        this.currentPage++
      }
    },
    prevPage() {
      if (this.currentPage > 0) {
        this.transitionName = 'slide-down'
        this.currentPage--
      }
    }
  }
}
</script>

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

.page {
  position: absolute;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
}

.slide-up-enter-active, .slide-up-leave-active,
.slide-down-enter-active, .slide-down-leave-active {
  transition: all 0.5s ease;
}

.slide-up-enter {
  transform: translateY(100%);
}

.slide-up-leave-to {
  transform: translateY(-100%);
}

.slide-down-enter {
  transform: translateY(-100%);
}

.slide-down-leave-to {
  transform: translateY(100%);
}
</style>

使用swiper.js

swiper.js是一个强大的滑动库，可以与Vue集成实现全屏滚动效果。

安装依赖：

npm install swiper vue-awesome-swiper

基本用法：

<template>
  <swiper ref="fullpageSwiper" :options="swiperOptions">
    <swiper-slide>第一屏内容</swiper-slide>
    <swiper-slide>第二屏内容</swiper-slide>
    <swiper-slide>第三屏内容</swiper-slide>
  </swiper>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

export default {
  components: {
    Swiper,
    SwiperSlide
  },
  data() {
    return {
      swiperOptions: {
        direction: 'vertical',
        slidesPerView: 1,
        mousewheel: true,
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        }
      }
    }
  }
}
</script>

<style>
.swiper-container {
  height: 100vh;
}
</style>

自定义实现

对于更简单的需求，可以完全自定义实现：

vue动画实现全屏滚动

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

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

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

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