Vue3实现虚拟列表的示例代码

npm install @e.yen/virtual-scroll-vue

// main.ts
import VirtualScroll from '@e.yen/virtual-scroll-vue'
app.use(VirtualScroll)

// 或者
// AnyComponent.vue
import { VirtualScroll } from '@e.yen/virtual-scroll-vue'

// main.ts
import '@e.yen/virtual-scroll-vue/dist/style.css'

type VirtualScrollItem = {
  key?: any
  height?: number // 可以指定元素高度，具有最高优先级
  [k: string | symbol]: any
}

const items = [
  {
    key: 'ABC',
  },
  {
    key: 'BCD',
  },
]

<!-- preserved默认具有最小值5px，设为0不会有任何效果 -->
<VirtualScroll :items="data" :preserved="0">
  <template #default="{ item }">
    <!-- 子项目结构 -->
  </template>
</VirtualScroll>

<!-- 通过placeholder将最小高度设为0，会导致列表一次性渲染所有元素 -->
<VirtualScroll :items="data" :placeholder="{}">
  <template #default="{ item }">
    <!-- 高度为0的子项目 -->
    <div></div>
  </template>
</VirtualScroll>

// 假设 startIndex 为 1
// 向items头部添加新数据，会导致列表渲染的起始元素变为旧数组中索引为 0 的项
items.unshift({
  key: 'CDE',
})

<script setup lang="ts">
import { ref } from 'vue'
import DynamicItem from '@/components/DynamicItem/DynamicItem.vue'
import { VirtualScroll, type VirtualScrollInstance } from '@e.yen/virtual-scroll-vue'
import {
  generateRandomFirstWord,
  generateRandomWord,
  lorem,
} from '@/utils/helper'
const defaultItem = { name: 'ab', comment: 'abc', index: -1 }
const items = ref(
  new Array(10000).fill(0).map((_, i) => ({
    key: i.toString(),
    name:
      generateRandomFirstWord() +
      (Math.random() > 0.5
        ? ' ' + generateRandomWord(Math.floor(Math.random() * 8) + 2)
        : ''),
    comment: lorem(Math.floor(Math.random() * 5) + 1),
    index: i,
  })),
)

const vlist = ref<VirtualScrollInstance>()
function lighteningScroll(delta: number) {
  vlist.value!.scroll(delta)
}
</script>

<template>
  <div class="page">
    <div class="scroll_container">
      <VirtualScroll
        ref="vlist"
        :items="items"
        :placeholder="defaultItem"
        :start-position="[1000, 0]"
        :padding="0"
      >
        <template #default="{ item }">
          <DynamicItem
            :index="item.index"
            :name="item.name"
            :comment="item.comment"
          ></DynamicItem>
        </template>
      </VirtualScroll>
    </div>
    <button @click="lighteningScroll(-100000)">向上极速滚动测试</button>
    <button @click="lighteningScroll(100000)">向下极速滚动测试</button>
  </div>
</template>

// vAutoRecord.ts
export default <Directive>{
  mounted(el, binding) {
    if (binding.arg && binding.arg === 'mounted') binding.value?.(el)
  },
  unmounted(el, binding) {
    if (binding.arg && binding.arg === 'unmounted') binding.value?.(el)
  },
}

// vWatchSize.ts
export default <Directive>{
  mounted(el, binding) {
    // ! nextTick保证vWatchSize在vAutoRecord之后执行
    nextTick(() => {
      if (binding.value instanceof Function) binding.value(el)
      el.observer = new ResizeObserver(() => {
        if (binding.value instanceof Function) binding.value(el)
      })
      el.observer.observe(el)
    })
  },
  beforeUnmount(el) {
    if (el.observer) {
      el.observer.disconnect()
      delete el.observer
    }
  },
}

<li
  v-for="(i, index) in renderRange"
  :key="props.items[i].key || index"
  class="virtual-scroll_item"
  v-watch-size="el => elementResize(i, el)"
  v-auto-record:mounted="el => elementMap.set(i, el)"
  v-auto-record:unmounted="() => elementMap.delete(i)"
>
  <slot :item="props.items[i]"></slot>
</li>

const elementResize = (index: number, element: HTMLElement) => {
  const cur = element.getBoundingClientRect().height
  const pre = getHeight(index) // 取出高度缓存
  let isInPaddingRange = false
  if (cur === pre) return

  // 判断高度变化的元素是否在预加载区间
  let offset = startPosition.value[1]
  let itemIndex = startPosition.value[0]
  let height = getHeight(itemIndex)
  while (height >= 0 && offset > 0) {
    if (itemIndex === index) {
      isInPaddingRange = true
      break
    }
    offset -= height
    height = getHeight(++itemIndex)
  }

  // 更新高度缓存
  updateHeight(index)

  if (isInPaddingRange) {
    // 如果高度变化的元素在预加载区间内，将offset加上高度变化量
    startPosition.value[1] += cur - pre
  } else if (cur < pre) {
    // 如果高度变化的元素不在预加载区间内，重新渲染
    renderTrigger.value = !renderTrigger.value
  }
}