vue3实现非确定高度列表项的虚拟滚动列表

什么是虚拟滚动列表

虚拟滚动列表是一种优化长列表渲染性能的技术，通过只渲染可视区域内的列表项，减少‌DOM的渲染数量，从而提高页面滚动的流畅性。虚拟滚动列表的核心原理是：在滚动时，只渲染可视区域内的列表项，而不是一次性渲染所有列表项。通过计算可视区域的起始索引和结束索引，动态渲染该范围内的列表项。当用户滚动时，根据滚动位置动态更新可视区域内的列表项，从而实现虚拟滚动的效果。

实现思路 

由上述描述可知，实现虚拟滚动列表，我们需要三个盒子：

1. 可视区盒子，控制列表展示的区域，超出滚动；
2. 所有列表项外包裹的盒子，高度为真实列表的高度；
3. 每个列表项外的盒子，用于动态定位展示列表项； 

我们监听1中盒子的滚动事件，在滚动的时候通过事件对象中的scrollTop动态计算对应展示区列表项的开始索引和结束索引，通过列表项的高度计算出对应列表项的偏移量，更新展示区域的列表项；

列表项高度不变的情况比较简单，此处只讨论列表项不等长的虚拟列表渲染；

代码实现 

我们需要计算所有列表项外包裹的盒子的高度以及每一项列表偏移量，但是由于我们要渲染的列表项每一项的高度都是不等长的，所以我们只有在对应列表项DOM渲染完成之后才知道每一项的真实高度，固我们需要维护一个所有列表项对应的高度和偏移量的map数据，用于更新列表，每次在真实的列表项挂在之后动态去更新这个map数据，再以此为模板动态更新包裹的盒子的高度；

<!-- list-item.vue -->
<template>
    <div :style="style" ref="domRef">
        <slot name="slot-scope" :data="data"></slot>
    </div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const emit = defineEmits(['onSizeChange']);

const props = defineProps({
    style: {
        type: Object,
        default: () => { }
    },
    data: {
        type: Object,
        default: () => { }
    },
    index: {
        type: Number,
        default: 0
    }
})

const domRef = ref(null);
const resizeObserver = null;


onMounted(() => {
    const domNode = domRef.value.children[0];
    emit("onSizeChange", props.index, domNode);
    const resizeObserver = new ResizeObserver(() => {
        emit("onSizeChange", props.index, domNode);
    });
    resizeObserver.observe(domNode);
})

onUnmounted(() => {
    if (resizeObserver) {
        resizeObserver?.unobserve(domRef.value.children[0]);
    }
})
</script>

此处使用ResizeObserver这个api来监听列表项dom尺寸的改变，用于更新我们维护的列表项map，但是这个api可能会有一些兼容性问题，可安装resize-observer-polyfill兼容低版本浏览器；

全部代码如下：

<template>
    <div
        class="virtual-wrap"
        :class="{hideScrollBar: isHideScrollBar}" ref="virtualWrap" :style="{
        width: width,
        height: height,
    }" @scroll="scrollHandle">
        <div class="virtual-content" :style="{height: totalEstimatedHeight +'px'}">
            <list-item v-for="(item,index) in showItemList" :key="item.dataIndex+index" :index="item.dataIndex" :data="item.data" :style="item.style"
                @onSizeChange="sizeChangeHandle">
                <template #slot-scope="slotProps">
                    <slot name="slot-scope" :slotProps="slotProps"></slot>
                </template>
            </list-item>
        </div>
    </div>
</template>
<script setup>
import ListItem from './list-item.vue';
import { ref, onMounted,watch, nextTick } from 'vue'

const props = defineProps({
    isHideScrollBar: {
        type: Boolean,
        default: false
    },
    height: {
        default: 100,
        type: Number
    },
    width: {
        default: 100,
        type: Number
    },
    itemEstimatedSize: {
        default: 50,
        type: Number
    },
    itemCount: {
        default: 0,
        type: Number
    },
    data: {
        default: ()=>[],
        type: Array
    },
    buffCount:{
        default: 4,
        type: Number
    }
})

const virtualWrap = ref(null);
const showItemList = ref([]);
const totalEstimatedHeight=ref(0)
const scrollOffset = ref(0)

watch(props.data,()=>{
    getCurrentChildren()
})

const sizeChangeHandle = (index, domNode) => {
    const height = domNode.offsetHeight;
    const { measuredDataMap, lastMeasuredItemIndex } = measuredData;
    const itemMetaData = measuredDataMap[index];
    itemMetaData.size = height;
    let offset = 0;
    for (let i = 0; i <= lastMeasuredItemIndex; i++) {
        const itemData = measuredDataMap[i];
        itemData.offset = offset;
        offset += itemData.size;
    }
}

// 元数据
const measuredData = {
    measuredDataMap: {},
    lastMeasuredItemIndex: -1,
};

const getCurrentChildren = () => {
    //重新计算高度
    estimatedHeight(props.itemEstimatedSize,props.itemCount)
    const [startIndex, endIndex] = getRangeToRender(props, scrollOffset.value)
    const items = [];
    for (let i = startIndex; i <= endIndex; i++) {
        const item = getItemMetaData(i);
        const itemStyle = {
            position: 'absolute',
            height: item.size + 'px',
            width: '100%',
            top: item.offset + 'px',
        };
        items.push({
            style: itemStyle,
            data: props.data[i],
            dataIndex:i
        });
    }
    showItemList.value = items;
}


const getRangeToRender = (props, scrollOffset) => {
    const { itemCount } = props;
    const startIndex = getStartIndex(props, scrollOffset);
    const endIndex = getEndIndex(props, startIndex + props.buffCount);
    return [
        Math.max(0, startIndex -1 - props.buffCount),
        Math.min(itemCount - 1, endIndex ),
    ];
};

const getStartIndex = (props, scrollOffset) => {
    const { itemCount } = props;
    let index = 0;
    while (true) {
        const currentOffset = getItemMetaData(index).offset;
        if (currentOffset >= scrollOffset) return index;
        if (index >= itemCount) return itemCount;
        index++
    }
}

const getItemMetaData = (index) => {
    const { itemEstimatedSize = 50 } = props;
    const { measuredDataMap, lastMeasuredItemIndex } = measuredData;
    // 如果当前索引比已记录的索引要大，说明要计算当前索引的项的size和offset
    if (index > lastMeasuredItemIndex) {
        let offset = 0;
        // 计算当前能计算出来的最大offset值
        if (lastMeasuredItemIndex >= 0) {
            const lastMeasuredItem = measuredDataMap[lastMeasuredItemIndex];
            offset += lastMeasuredItem.offset + lastMeasuredItem.size;
        }
        // 计算直到index为止，所有未计算过的项
        for (let i = lastMeasuredItemIndex + 1; i <= index; i++) {
            const currentItemSize = itemEstimatedSize;
            measuredDataMap[i] = { size: Number(currentItemSize), offset };
            offset += currentItemSize;
        }
        // 更新已计算的项的索引值
        // measuredData.lastMeasuredItemIndex = index;
    }
    return measuredDataMap[index];
};

const getEndIndex = (props, startIndex) => {
    const { height, itemCount } = props;
    // 获取可视区内开始的项
    const startItem = getItemMetaData(startIndex);
    // 可视区内最大的offset值
    const maxOffset = Number(startItem.offset) + Number(height);
    // 开始项的下一项的offset，之后不断累加此offset，知道等于或超过最大offset，就是找到结束索引了
    let offset = Number(startItem.offset) + startItem.size;
    // 结束索引
    let endIndex = startIndex;

    // 累加offset
    while (offset <= maxOffset && endIndex < (itemCount - 1)) {
        endIndex++;
        const currentItem = getItemMetaData(endIndex);
        offset += currentItem.size;
    }
     // 更新已计算的项的索引值
    measuredData.lastMeasuredItemIndex = endIndex;
    return endIndex;
};
const estimatedHeight = (defaultEstimatedItemSize = 50, itemCount) => {
    let measuredHeight = 0;
    const { measuredDataMap, lastMeasuredItemIndex } = measuredData;
    // 计算已经获取过真实高度的项的高度之和
    if (lastMeasuredItemIndex >= 0) {
        const lastMeasuredItem = measuredDataMap[lastMeasuredItemIndex];
        measuredHeight = lastMeasuredItem.offset + lastMeasuredItem.size;
    }
    // 未计算过真实高度的项数
    const unMeasuredItemsCount = itemCount - measuredData.lastMeasuredItemIndex - 1;
    // 预测总高度
    totalEstimatedHeight.value = measuredHeight + unMeasuredItemsCount * defaultEstimatedItemSize;
}

//列表滚动处理
const scrollHandle = (event) => {
    const { scrollTop } = event.currentTarget;
    scrollOffset.value = scrollTop;
    getCurrentChildren();
}

onMounted(() => {
    nextTick(() => {
        getCurrentChildren();
    })
})
</script>
<style>
.hideScrollBar::-webkit-scrollbar {
  width: 0;
}
.virtual-wrap {
    position: relative;
    overflow: auto;
}

.virtual-content {
    position: relative;
    overflow: auto;
}
</style>