当前位置：首页 > VUE

vue实现页面滑动

2026-02-19 16:18:07VUE

Vue 实现页面滑动的方法

使用 CSS 实现基础滑动

通过 CSS 的 overflow 和 scroll 属性可以实现简单的滑动效果。在 Vue 模板中为容器添加样式：

<template>
  <div class="scroll-container">
    <!-- 内容 -->
  </div>
</template>

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

使用 Vue 指令实现平滑滚动

通过 Vue 自定义指令实现平滑滚动效果。以下是一个自定义指令的示例：

Vue.directive('smooth-scroll', {
  inserted(el) {
    el.addEventListener('wheel', (e) => {
      e.preventDefault()
      el.scrollBy({
        top: e.deltaY,
        behavior: 'smooth'
      })
    })
  }
})

在模板中使用指令：

<div v-smooth-scroll class="scroll-container">
  <!-- 内容 -->
</div>

集成第三方库

使用 vue-smooth-scroll 等第三方库可以快速实现滑动效果：

安装库：

npm install vue-smooth-scroll

在组件中使用：

import VueSmoothScroll from 'vue-smooth-scroll'
Vue.use(VueSmoothScroll)

模板中通过指令调用：

<button v-smooth-scroll="{ duration: 1000, offset: -50 }">Scroll</button>

实现横向滑动

横向滑动可以通过调整 CSS 和事件监听实现：

<div class="horizontal-scroll" @wheel="handleHorizontalScroll">
  <!-- 内容 -->
</div>

<script>
export default {
  methods: {
    handleHorizontalScroll(e) {
      e.preventDefault()
      this.$el.scrollBy({
        left: e.deltaY,
        behavior: 'smooth'
      })
    }
  }
}
</script>

<style>
.horizontal-scroll {
  overflow-x: auto;
  white-space: nowrap;
}
</style>

移动端触摸滑动

通过 touchstart、touchmove 和 touchend 事件实现移动端滑动：

export default {
  data() {
    return {
      startX: 0,
      startY: 0
    }
  },
  methods: {
    handleTouchStart(e) {
      this.startX = e.touches[0].clientX
      this.startY = e.touches[0].clientY
    },
    handleTouchMove(e) {
      const deltaX = e.touches[0].clientX - this.startX
      const deltaY = e.touches[0].clientY - this.startY
      // 根据 deltaX 或 deltaY 实现滑动逻辑
    }
  }
}

使用 CSS Scroll Snap

CSS Scroll Snap 可以实现精准的滑动定位：

.scroll-container {
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
}

.section {
  scroll-snap-align: start;
}

性能优化

对于长列表滑动，建议使用虚拟滚动技术。可以集成 vue-virtual-scroller：

安装：

npm install vue-virtual-scroller

使用示例：

import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
import { RecycleScroller } from 'vue-virtual-scroller'

export default {
  components: {
    RecycleScroller
  }
}

vue实现页面滑动