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 // 可以指定元素高度，具有最高優(yōu)先級(jí)
  [k: string | symbol]: any
}

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

<!-- preserved默認(rèn)具有最小值5px，設(shè)為0不會(huì)有任何效果 -->
<VirtualScroll :items="data" :preserved="0">
  <template #default="{ item }">
    <!-- 子項(xiàng)目結(jié)構(gòu) -->
  </template>
</VirtualScroll>

<!-- 通過placeholder將最小高度設(shè)為0，會(huì)導(dǎo)致列表一次性渲染所有元素 -->
<VirtualScroll :items="data" :placeholder="{}">
  <template #default="{ item }">
    <!-- 高度為0的子項(xiàng)目 -->
    <div></div>
  </template>
</VirtualScroll>

// 假設(shè) startIndex 為 1
// 向items頭部添加新數(shù)據(jù)，會(huì)導(dǎo)致列表渲染的起始元素變?yōu)榕f數(shù)組中索引為 0 的項(xiàng)
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)">向上極速滾動(dòng)測(cè)試</button>
    <button @click="lighteningScroll(100000)">向下極速滾動(dòng)測(cè)試</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之后執(zhí)行
    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

  // 判斷高度變化的元素是否在預(yù)加載區(qū)間
  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) {
    // 如果高度變化的元素在預(yù)加載區(qū)間內(nèi)，將offset加上高度變化量
    startPosition.value[1] += cur - pre
  } else if (cur < pre) {
    // 如果高度變化的元素不在預(yù)加載區(qū)間內(nèi)，重新渲染
    renderTrigger.value = !renderTrigger.value
  }
}