当前位置：首页 > VUE

vue虚拟滚动实现

2026-03-08 23:27:52VUE

vue虚拟滚动实现

虚拟滚动是一种优化长列表渲染性能的技术，通过仅渲染可视区域内的元素来减少DOM节点数量。以下是Vue中实现虚拟滚动的几种方法：

使用第三方库

推荐使用成熟的虚拟滚动库，如vue-virtual-scroller或vue-virtual-scroll-list。

安装vue-virtual-scroller：

npm install vue-virtual-scroller

基本使用示例：

<template>
  <RecycleScroller
    class="scroller"
    :items="items"
    :item-size="50"
    key-field="id"
    v-slot="{ item }"
  >
    <div class="item">{{ item.name }}</div>
  </RecycleScroller>
</template>

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

export default {
  components: { RecycleScroller },
  data() {
    return {
      items: Array(10000).fill().map((_, i) => ({ id: i, name: `Item ${i}` }))
    }
  }
}
</script>

<style>
.scroller {
  height: 500px;
}
.item {
  height: 50px;
  display: flex;
  align-items: center;
}
</style>

自定义实现

如果需要手动实现虚拟滚动，可以结合计算属性和滚动事件：

vue虚拟滚动实现

<template>
  <div class="viewport" @scroll="handleScroll" ref="viewport">
    <div class="scroll-container" :style="{ height: totalHeight + 'px' }">
      <div 
        class="visible-items" 
        :style="{ transform: `translateY(${offset}px)` }"
      >
        <div 
          v-for="item in visibleItems" 
          :key="item.id" 
          class="item"
          :style="{ height: itemHeight + 'px' }"
        >
          {{ item.content }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: Array(10000).fill().map((_, i) => ({
        id: i,
        content: `Item ${i}`
      })),
      itemHeight: 50,
      viewportHeight: 500,
      offset: 0
    }
  },
  computed: {
    totalHeight() {
      return this.items.length * this.itemHeight
    },
    visibleCount() {
      return Math.ceil(this.viewportHeight / this.itemHeight) + 2
    },
    startIndex() {
      return Math.floor(this.offset / this.itemHeight)
    },
    visibleItems() {
      return this.items.slice(
        this.startIndex,
        this.startIndex + this.visibleCount
      )
    }
  },
  methods: {
    handleScroll() {
      this.offset = this.$refs.viewport.scrollTop
    }
  }
}
</script>

<style>
.viewport {
  height: 500px;
  overflow-y: auto;
}
.scroll-container {
  position: relative;
}
.visible-items {
  position: absolute;
  width: 100%;
}
.item {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #eee;
}
</style>