网上的虚拟列表支持单行多列（横向滚动列表）和单列多行（纵向滚动列表），npm也有虚拟列表和虚拟网格。例如：vue-virtual-scroll-list、vue-virtual-scroll-grid。使用起来不太方便，而且不支持插槽。

这个是虚拟列表的实现，多行多列虚拟列表在这个基础上扩展，使用行和列来代表数据下标，通过计算开始位置和结束位置，动态截取可见区域元素。

<script setup lang="ts">
import { computed, ref, StyleValue } from 'vue'

const props = defineProps<{
    type: 'horizontal' | 'vertical'
    itemWidth: number
    itemHeight: number
    rowSpace: number
    columnSpace: number
    repeatNumber: number
    values: any[]
}>()

type Region = { rowCount: number; columnCount: number }
type Position = { row: number; column: number }

const itemWidthWithSpace = computed(() => props.itemWidth + props.columnSpace)
const itemHeightWithSpace = computed(() => props.itemHeight + props.rowSpace)
/**
 * css能设置的最大宽高，这里取一半
 * https://stackoverflow.com/questions/16637530/whats-the-maximum-pixel-value-of-css-width-and-height-properties
 * Firefox: 33554400px
 * Chrome:  33554428px
 * Opera:   33554428px
 * IE 9:    21474836.47px
 */
const CSSMaxWidth = computed(() => Math.floor(16777200 / itemWidthWithSpace.value) * itemWidthWithSpace.value)
const CSSMaxHeight = computed(() => Math.floor(16777200 / itemHeightWithSpace.value) * itemHeightWithSpace.value)
const offsetRow = computed(() => Math.floor(167772 / itemHeightWithSpace.value))
const offseColumn = computed(() => Math.floor(167772 / itemWidthWithSpace.value))

const wrapper = ref<HTMLElement>()
const width = computed(() => wrapper.value?.offsetWidth ?? 0)
const height = computed(() => wrapper.value?.offsetHeight ?? 0)
const itemWidthPx = computed(() => `${props.itemWidth}px`)
const itemHeightPx = computed(() => `${props.itemHeight}px`)
const columnSpacePx = computed(() => `${props.columnSpace}px`)
const rowSpacePx = computed(() => `${props.rowSpace}px`)
const contentMarginLeftPx = computed(() => `${-props.columnSpace}px`)
const contentMarginTopPx = computed(() => `${-props.rowSpace}px`)

const contentRegion = computed<Region>(() => {
    const region = { rowCount: 1, columnCount: 1 }
    if (props.type == 'horizontal') {
        if (props.repeatNumber > 0) {
            region.rowCount = Math.ceil(props.values.length / props.repeatNumber)
            region.columnCount = Math.min(props.values.length, props.repeatNumber)
        } else if (props.values.length > 0) {
            region.columnCount = props.values.length
        }
    } else if (props.type == 'vertical') {
        if (props.repeatNumber > 0) {
            region.columnCount = Math.ceil(props.values.length / props.repeatNumber)
            region.rowCount = Math.min(props.values.length, props.repeatNumber)
        } else if (props.values.length > 0) {
            region.rowCount = props.values.length
        }
    }
    return region
})

// 可见区域能显示多少行，多少列
const showRegion = computed<Region>(() => {
    return {
        rowCount: Math.min(Math.floor((height.value + props.rowSpace) / itemHeightWithSpace.value) + 1, contentRegion.value.rowCount),
        columnCount: Math.min(Math.floor((width.value + props.columnSpace) / itemWidthWithSpace.value) + 1, contentRegion.value.columnCount),
    }
})

// 偏移位置，用于处理到达css最大长度的情况
const offsetRegion = ref<Region>({ rowCount: 0, columnCount: 0 })

// 渲染元素的第一个位置
const startPosition = ref<Position>({ row: 0, column: 0 })
const endPosition = computed<Position>(() => {
    const position = { row: 0, column: 0 }
    // 3倍是需要预留缓冲区域
    position.row = Math.min(startPosition.value.row + showRegion.value.rowCount * 3, contentRegion.value.rowCount - 1)
    position.column = Math.min(startPosition.value.column + showRegion.value.columnCount * 3, contentRegion.value.columnCount - 1)
    if (props.type == 'horizontal') {
        const index = position.row * contentRegion.value.columnCount + position.column
        if (index >= props.values.length) {
            position.row = contentRegion.value.rowCount - 1
            position.column = contentRegion.value.columnCount - 1
        }
        if (props.repeatNumber <= 0) {
            position.row = 0
        }
    } else if (props.type == 'vertical') {
        const index = position.column * contentRegion.value.rowCount + position.row
        if (index >= props.values.length) {
            position.column = contentRegion.value.columnCount - 1
            position.row = contentRegion.value.rowCount - 1
        }
        if (props.repeatNumber <= 0) {
            position.column = 0
        }
    }
    return position
})

const showList = computed(() => {
    const result: any[] = []
    if (props.type == 'horizontal') {
        for (let row = startPosition.value.row; row <= endPosition.value.row; row++) {
            const startIndex = row * contentRegion.value.columnCount + startPosition.value.column
            const endIndex = row * contentRegion.value.columnCount + endPosition.value.column
            result.push(...props.values.slice(startIndex, endIndex + 1))
        }
    } else if (props.type == 'vertical') {
        for (let column = startPosition.value.column; column <= endPosition.value.column; column++) {
            const startIndex = column * contentRegion.value.rowCount + startPosition.value.row
            const endIndex = column * contentRegion.value.rowCount + endPosition.value.row
            result.push(...props.values.slice(startIndex, endIndex + 1))
        }
    }
    return result
})

const contentStyle = computed(() => {
    let left = itemWidthWithSpace.value * (startPosition.value.column - offsetRegion.value.columnCount)
    let top = itemHeightWithSpace.value * (startPosition.value.row - offsetRegion.value.rowCount)
    let right = itemWidthWithSpace.value * (contentRegion.value.columnCount - 1 - (endPosition.value.column - offsetRegion.value.columnCount))
    let bottom = itemHeightWithSpace.value * (contentRegion.value.rowCount - 1 - (endPosition.value.row - offsetRegion.value.rowCount))
    if (left + right > CSSMaxWidth.value) {
        if (left > CSSMaxWidth.value) {
            left = CSSMaxWidth.value
        }
        right = CSSMaxWidth.value - left
    }
    if (top + bottom > CSSMaxHeight.value) {
        if (top > CSSMaxHeight.value) {
            top = CSSMaxHeight.value
        }
        bottom = CSSMaxHeight.value - top
    }
    const width = itemWidthWithSpace.value * (endPosition.value.column - startPosition.value.column + 1)
    const height = itemHeightWithSpace.value * (endPosition.value.row - startPosition.value.row + 1)
    return {
        padding: `${top}px ${right}px ${bottom}px ${left}px`,
        width: `${width}px`,
        height: `${height}px`,
        flexDirection: props.type == 'horizontal' ? 'row' : 'column',
    } as StyleValue
})

const handleScroll = (e: UIEvent) => {
    const target: HTMLElement = e.target as HTMLElement
    // 可见区域第一个元素的index
    const row = Math.floor((target.scrollTop + props.rowSpace) / itemHeightWithSpace.value) + offsetRegion.value.rowCount
    const column = Math.floor((target.scrollLeft + props.columnSpace) / itemWidthWithSpace.value) + offsetRegion.value.columnCount
    startPosition.value.row = row < showRegion.value.rowCount ? 0 : row - showRegion.value.rowCount
    startPosition.value.column = column < showRegion.value.columnCount ? 0 : column - showRegion.value.columnCount
    if (props.repeatNumber <= 0) {
        if (props.type == 'horizontal') {
            startPosition.value.row = 0
        } else if (props.type == 'vertical') {
            startPosition.value.column = 0
        }
    }
    //TODO: 分页加载时，由于滚动过快，target.scrollTop并不会立即生效，导致数据加载会出现偏移
    // 到达最低部或者最右部，分页加载数据
    if (target.scrollTop + target.offsetHeight >= target.scrollHeight && endPosition.value.row < contentRegion.value.rowCount - 1) {
        const offset = contentRegion.value.rowCount - 1 - endPosition.value.row > offsetRow.value ? offsetRow.value : contentRegion.value.rowCount - 1 - endPosition.value.row
        offsetRegion.value.rowCount += offset
        target.scrollTop -= itemHeightWithSpace.value * offset
    } else if (offsetRegion.value.rowCount > 0 && startPosition.value.row < offsetRegion.value.rowCount) {
        const offset = offsetRegion.value.rowCount > offsetRow.value ? offsetRow.value : offsetRegion.value.rowCount
        offsetRegion.value.rowCount -= offset
        target.scrollTop += itemHeightWithSpace.value * offset
    } else if (target.scrollLeft + target.offsetWidth >= target.scrollWidth && endPosition.value.column < contentRegion.value.columnCount - 1) {
        const offset = contentRegion.value.columnCount - 1 - endPosition.value.column > offseColumn.value ? offseColumn.value : contentRegion.value.columnCount - 1 - endPosition.value.column
        offsetRegion.value.columnCount += offset
        target.scrollLeft -= itemWidthWithSpace.value * offset
    } else if (offsetRegion.value.columnCount > 0 && startPosition.value.column < offsetRegion.value.columnCount) {
        const offset = offsetRegion.value.columnCount > offseColumn.value ? offseColumn.value : offsetRegion.value.columnCount
        offsetRegion.value.columnCount -= offset
        target.scrollLeft += itemWidthWithSpace.value * offset
    }
}
</script>

<template>
    <div ref="wrapper" :class="$style.wrapper" @scroll.passive="handleScroll">
        <div :class="$style.content" :style="contentStyle">
            <div v-for="(item, index) in showList" :key="index" :class="$style.item">
                <slot :item="item" :index="index"></slot>
            </div>
        </div>
    </div>
</template>

<style module lang="less">
.wrapper {
    overflow: auto;
    .content {
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        margin-left: v-bind(contentMarginLeftPx);
        margin-top: v-bind(contentMarginTopPx);
        .item {
            width: v-bind(itemWidthPx);
            height: v-bind(itemHeightPx);
            margin-left: v-bind(columnSpacePx);
            margin-top: v-bind(rowSpacePx);
            position: relative;
        }
    }
}
</style>

由于CSS可设置的最大长度的限制，在谷歌浏览器最大能设置33554428px。普通的虚拟列表最多只能支持10几万条数据。为了支持上千万条数据，需要固定padding的最大值，我这里只取最大长度的一半，剩下的留给宽度、高度。之后引入偏移位置，当滚动到列表边界时，计算需要偏移的位置和scrollTop、scrollLeft，让滚动条可以重新滚动。即使加载上千万数据，只要浏览器的内存足够，是可以正常滚动的。

npm install @xuemiyang/vue-virtual-list

<script setup lang="ts">
import { ref } from "vue";
import { VirtualList } from "@xuemiyang/vue-virtual-list";
import "@xuemiyang/vue-virtual-list/dist/style.css";

const allList = ref<any[]>([]);

for (let i = 0; i < 10000000; i++) {
  allList.value.push({ title: `title ${i}`, id: i });
}
</script>

<template>
  <div>
    <VirtualList
      class="list"
      type="horizontal"
      :item-width="200"
      :item-height="100"
      :row-space="10"
      :column-space="10"
      :repeat-number="0"
      :values="allList"
    >
      <template #default="{ item }">
        <h2 class="item">{{ item.title }}</h2>
      </template>
    </VirtualList>
  </div>
</template>

<style scoped>
.list {
  width: 500px;
  height: 300px;
}
.list .item {
  background-color: bisque;
}
</style>

效果图