当前位置：首页 > VUE

vue实现页面的滑动

2026-02-21 19:58:41VUE

Vue 实现页面滑动的方法

使用原生滚动

在Vue中可以直接利用CSS和HTML原生滚动特性实现滑动效果。在需要滑动的容器上设置固定高度和overflow-y: auto即可启用垂直滚动。

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

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

使用better-scroll库

better-scroll是一个流行的滚动解决方案，特别适合移动端场景。需要先安装依赖：

npm install better-scroll

基础实现示例：

import BScroll from 'better-scroll'

export default {
  mounted() {
    this.scroll = new BScroll(this.$refs.wrapper, {
      scrollY: true,
      click: true
    })
  }
}

<template>
  <div ref="wrapper" class="wrapper">
    <div class="content">
      <!-- 可滚动内容 -->
    </div>
  </div>
</template>

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

使用Vue自定义指令

可以创建自定义指令来实现滚动控制：

Vue.directive('scroll', {
  inserted(el, binding) {
    el.style.overflowY = binding.value ? 'auto' : 'hidden'
    el.style.height = '100vh'
  }
})

使用方式：

<div v-scroll="true">
  <!-- 可滚动内容 -->
</div>

实现平滑滚动动画

通过CSS的scroll-behavior属性可以轻松实现平滑滚动：

.container {
  scroll-behavior: smooth;
}

结合Vue的refs实现编程式滚动：

methods: {
  scrollToElement() {
    this.$refs.target.scrollIntoView({ behavior: 'smooth' })
  }
}

监听滚动事件

在Vue组件中添加滚动事件监听：

mounted() {
  window.addEventListener('scroll', this.handleScroll)
},
beforeDestroy() {
  window.removeEventListener('scroll', this.handleScroll)
},
methods: {
  handleScroll() {
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop
    // 处理滚动逻辑
  }
}

使用第三方UI库

如Element UI等框架提供了现成的滚动组件：

<el-scrollbar style="height:100vh">
  <!-- 内容 -->
</el-scrollbar>

性能优化建议

对于长列表，建议使用虚拟滚动技术，如vue-virtual-scroller：

npm install vue-virtual-scroller

使用示例：

vue实现页面的滑动

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

<RecycleScroller
  class="scroller"
  :items="items"
  :item-size="32"
  key-field="id"
>
  <template v-slot="{ item }">
    <!-- 渲染单个项目 -->
  </template>
</RecycleScroller>