当前位置：首页 > VUE

虚拟化列表vue实现

2026-02-23 03:56:00VUE

虚拟化列表的概念

虚拟化列表（Virtual List）是一种优化长列表渲染性能的技术，通过仅渲染可视区域内的元素，减少DOM节点数量和内存占用。适用于Vue中需要展示大量数据的场景（如表格、无限滚动列表）。

基于`vue-virtual-scroller`的实现

vue-virtual-scroller是专为Vue设计的虚拟滚动库，支持动态高度和固定高度项。

安装依赖：

npm install vue-virtual-scroller

注册组件：

import VueVirtualScroller from 'vue-virtual-scroller';
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';

Vue.use(VueVirtualScroller);

模板示例：

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

关键配置：

items: 数据源数组
item-size: 每项高度（固定高度时）
key-field: 数据项唯一标识

基于`vue-virtual-scroll-list`的实现

轻量级虚拟列表库，适合简单场景。

安装：

npm install vue-virtual-scroll-list

使用示例：

import VirtualList from 'vue-virtual-scroll-list';

export default {
  components: { VirtualList },
  data() {
    return {
      items: Array(10000).fill().map((_, i) => ({ id: i, text: `Item ${i}` })),
      size: 50 // 每项高度
    };
  }
};

模板：

<VirtualList
  :size="size"
  :remain="8"
  :items="items"
>
  <template v-slot="{ item }">
    <div class="item">{{ item.text }}</div>
  </template>
</VirtualList>

参数说明：

remain: 可见区域保留的项数
size: 每项高度（需固定）

手动实现虚拟列表

核心逻辑：计算可视区域起始/结束索引，动态渲染切片数据。

计算可视范围：

const startIndex = Math.floor(scrollTop / itemSize);
const endIndex = Math.min(
  startIndex + Math.ceil(visibleHeight / itemSize),
  items.length
);

模板结构：

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

样式要点：

虚拟化列表vue实现

.viewport {
  overflow-y: auto;
  height: 500px; /* 固定可视区域高度 */
}
.scroll-placeholder {
  position: relative;
}
.visible-items {
  position: absolute;
  width: 100%;
}