当前位置：首页 > VUE

vue实现多屏滚动

2026-02-21 21:34:48VUE

Vue 实现多屏滚动

多屏滚动通常指页面分为多个全屏区块，通过滚动或点击导航切换。以下是基于 Vue 的实现方法：

使用原生滚动监听

通过监听滚动事件，结合 scroll-snap 特性实现分屏滚动效果。

<template>
  <div class="scroll-container">
    <section v-for="(item, index) in sections" :key="index" class="screen">
      {{ item.content }}
    </section>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sections: [
        { content: "第一屏内容" },
        { content: "第二屏内容" },
        { content: "第三屏内容" }
      ]
    }
  }
}
</script>

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

.screen {
  height: 100vh;
  scroll-snap-align: start;
}
</style>

使用第三方库（如 fullpage.js）

安装 vue-fullpage.js 简化实现：

npm install vue-fullpage.js --save

组件实现：

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

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

export default {
  components: {
    'full-page': VueFullPage
  },
  data() {
    return {
      options: {
        navigation: true,
        anchors: ['page1', 'page2', 'page3']
      }
    }
  }
}
</script>

自定义滚动控制

通过编程方式控制滚动位置：

<template>
  <div>
    <nav>
      <button 
        v-for="(_, index) in screens" 
        :key="index"
        @click="scrollTo(index)">
        跳转到第{{ index + 1 }}屏
      </button>
    </nav>
    <div class="container" ref="container">
      <div 
        v-for="(screen, index) in screens" 
        :key="index"
        class="screen">
        {{ screen }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      screens: ['第一屏内容', '第二屏内容', '第三屏内容']
    }
  },
  methods: {
    scrollTo(index) {
      const container = this.$refs.container
      container.scrollTo({
        top: window.innerHeight * index,
        behavior: 'smooth'
      })
    }
  }
}
</script>

<style>
.container {
  height: 100vh;
  overflow-y: scroll;
  scroll-behavior: smooth;
}

.screen {
  height: 100vh;
}
</style>

移动端优化

添加 touch 事件支持：

vue实现多屏滚动

// 在 mounted 中添加 touch 事件监听
mounted() {
  let startY = 0
  const container = this.$refs.container

  container.addEventListener('touchstart', e => {
    startY = e.touches[0].clientY
  }, { passive: true })

  container.addEventListener('touchmove', e => {
    const moveY = e.touches[0].clientY
    const diff = startY - moveY

    if (Math.abs(diff) > 50) {
      const direction = diff > 0 ? 1 : -1
      this.currentIndex = Math.max(0, 
        Math.min(this.screens.length - 1, 
          this.currentIndex + direction))
      this.scrollTo(this.currentIndex)
    }
  }, { passive: true })
}