Vue Virtual Scroll

一个高性能的 Vue 3 虚拟滚动组件，专为处理大量数据而设计。

特性

• 高性能虚拟滚动 - 只渲染可视区域的内容，支持百万级数据
• 智能缓冲区 - 可配置的缓冲区大小，平衡性能和流畅度
• 滚动性能优化 - 内置节流机制和 requestAnimationFrame 优化
• 灵活配置 - 支持自定义项目高度、容器高度等
• 响应式设计 - 支持触摸设备和各种屏幕尺寸
• TypeScript 支持 - 完整的类型定义

性能优化特性

滚动性能优化

• 节流机制: 可配置的滚动事件节流，避免过度触发
• RequestAnimationFrame: 使用 RAF 优化滚动动画性能
• 硬件加速: CSS transform 和 will-change 属性优化
• 触摸优化: -webkit-overflow-scrolling: touch 支持

渲染优化

• 虚拟化渲染: 只渲染可视区域 + 缓冲区的项目
• 智能缓冲区: 可配置的预渲染项目数量
• DOM 复用: 最小化 DOM 操作和重排重绘

安装

npm install vue-virtual-list-bymao
# 或
yarn add vue-virtual-list-bymao
# 或
pnpm add vue-virtual-list-bymao

基本使用

<template>
  <CommonVirtualList
    :items="items"
    :item-height="50"
    :container-height="400"
    :visible-count="8"
    :buffer-size="4"
    :throttle-delay="16"
    @scroll="handleScroll"
  >
    <template #default="{ item, index }">
      <div class="list-item">
        {{ item.name }} - 索引: {{ index }}
      </div>
    </template>
  </CommonVirtualList>
</template>

<script setup>
import { CommonVirtualList } from 'vue-virtual-list-bymao'

const items = Array.from({ length: 10000 }, (_, i) => ({
  id: i,
  name: `项目 ${i}`
}))

const handleScroll = (scrollInfo) => {
  console.log('滚动位置:', scrollInfo.scrollTop)
}
</script>

配置选项

Props

| 属性 | 类型 | 必填 | 默认值 | 说明 | |------|------|------|--------|------| | items | Array | 必填 | - | 数据源数组 | | itemHeight | Number | 必填 | - | 每个项目的高度（像素） | | containerHeight | Number | 必填 | - | 容器高度（像素） | | visibleCount | Number | 可选 | 10 | 可视区域显示的项目数量 | | bufferSize | Number | 可选 | 5 | 缓冲区大小（预渲染项目数） | | throttleDelay | Number | 可选 | 16 | 滚动节流延迟（毫秒） | | getItemKey | Function | 可选 | (item, index) => item.id \|\| index | 获取项目唯一键的函数 |

性能配置建议

节流延迟 (throttleDelay)

• 8ms: 120fps，适合高性能设备，滚动最流畅
• 16ms: 60fps，平衡性能和流畅度，推荐默认值
• 32ms: 30fps，适合低性能设备，减少 CPU 占用

缓冲区大小 (bufferSize)

• 1-3: 内存占用少，但可能出现白屏
• 4-8: 平衡性能和内存，推荐值
• 9+: 更流畅的滚动，但内存占用增加

方法

| 方法 | 参数 | 说明 | |------|------|------| | scrollToIndex(index, behavior) | index: number, behavior?: 'auto' \| 'smooth' | 滚动到指定索引 | | scrollToTop(behavior) | behavior?: 'auto' \| 'smooth' | 滚动到顶部 | | scrollToBottom(behavior) | behavior?: 'auto' \| 'smooth' | 滚动到底部 | | getScrollTop() | - | 获取当前滚动位置 | | setScrollTop(top) | top: number | 设置滚动位置 |

事件

| 事件名 | 参数 | 说明 | |--------|------|------| | scroll | { scrollTop, scrollLeft, target } | 滚动事件 | | visible-change | { visibleData, startIndex, endIndex } | 可视数据变化 |

性能调优

1. 优化滚动性能

<CommonVirtualList
  :throttle-delay="8"        <!-- 高性能设备使用 8ms -->
  :throttle-delay="16"       <!-- 一般设备使用 16ms -->
  :throttle-delay="32"       <!-- 低性能设备使用 32ms -->
/>

2. 优化渲染性能

<CommonVirtualList
  :buffer-size="4"           <!-- 平衡性能和内存 -->
  :visible-count="8"         <!-- 根据容器高度调整 -->
/>

3. 避免频繁更新

<script setup>
// 避免在滚动时频繁更新数据
const handleScroll = (scrollInfo) => {
  // 不要在这里做复杂计算或数据更新
}

// 使用节流或防抖处理滚动后的操作
import { debounce } from 'lodash-es'

const debouncedUpdate = debounce(() => {
  // 滚动停止后的操作
}, 100)
</script>

注意事项

1. 固定高度: 所有项目必须具有相同的高度
2. 数据稳定性: 避免频繁改变 items 数组引用
3. 性能监控: 在低性能设备上适当增加 throttleDelay
4. 内存管理: 大数据量时合理设置 bufferSize

浏览器支持

• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+

贡献

欢迎提交 Issue 和 Pull Request！

许可证

MIT License