虚拟列表 - Vue3实现一个可动态改变高度的虚拟滚动列表

虚拟列表 - Vue3实现一个可动态改变高度的虚拟滚动列表

前言

在开发中经常遇到大量的渲染列表数据问题，往往我们就只是简单地遍历渲染，没有过多地去关注是否会存在性能问题，这导致如果数据量较大的时候，比如上万条数据，将会在dom中渲染上万个节点，这将加大浏览器的开销，可能会导致页面卡顿，加载慢等性能问题。因此，在渲染大量数据时，可以选择使用虚拟列表，只渲染用户可视区域内的dom节点。该组件已开源上传npm，可以直接安装使用，Git地址在文尾。

虚拟列表实现原理

每条固定高度

1、通过传入组件的每条数据的高度，计算整个列表的高度，从而得到滚动列表的总高，并将总高赋值给列表。
2、监听滚动事件，监听外层容器的滚动事件，并确定可视区域内起止数据在总数据的索引值，这可以通过scrollTop来实现。
3、设置数据对应的元素，为每条数据设置一个绝对定位，其中top等于索引值乘以每条数据的高度。
4、考虑缓冲条数，为了避免滑动过快产生空白，可以设置缓冲条数。具体来说，如果滚动到底部，可以只显示最后N条数据，如果滚动到上部，可以只显示前N条数据。
这样，就可以实现一个固定高度的虚拟列表。

每条动态高度

原理和固定高度基本一致，差别在于，用户可以预先定义每条数据的高度，在渲染时再动态获取每一条数据的实际高度，从而重新计算滚动列表的总体高度。

主要代码实现

模板部分

showItemList循环可视区域内的数据+缓存区的数据

<template>
    <div class="virtual-wrap" ref="virtualWrap" :style="{
        width: width + 'px',
        height: height + 'px',
    }" @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>

获取需要渲染的数据

通过可视区域内的开始和结束索引，获取需要渲染的列表数据。

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: any, scrollOffset: any) => {
    const { itemCount } = props;
    const startIndex = getStartIndex(props, scrollOffset);
    const endIndex = getEndIndex(props, startIndex + props.buffCount);
    return [
        Math.max(0, startIndex -1),
        Math.min(itemCount - 1, endIndex ),
    ];
};

const getStartIndex = (props: any, scrollOffset: number) => {
    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 getEndIndex = (props: any, startIndex: number) => {
    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: number) => {
    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;
}

子组件实现

1、通过ResizeObserver在子节点高度变化时触发父组件的方法，重新计算整体高度。
2、通过插槽将每条数据动态插入到列表中。

<template>
    <div :style="style" ref="domRef">
        <slot name="slot-scope" :data="data"></slot>
    </div>
</template>
<script lang="ts" 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<any>(null);
const resizeObserver:any = 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>

组件使用

npm install @fcli/vue-virtually-list --save-dev 来安装

在项目中使用
import VueVirtuallyList from '@fcli/vue-virtually-list';
const app=createApp(App)
app.use(VueVirtuallyList);

示例：

<div class="content">
  <vue-virtually-list :data="list" :height="400" :width="600" :itemCount="1000" :itemEstimatedSize="20" :buffCount="50">
    <template #slot-scope="{slotProps}">
      <div class="li">{{ slotProps.data.text }}</div>
    </template>
  </vue-virtually-list>
</div>

属性	属性名称	类型	可选值
data	列表数据	Array	[]
height	虚拟容器的高度	number	0
width	虚拟容器的宽度	number	0
itemCount	滚动列表的条数	number	0
itemEstimatedSize	预设每行数据的高度	number	可不填，组件会动态计算
buffCount	上下缓冲区的条数	number	增加快速滚动时的流畅性
#slot-scope	插槽 ｜ object ｜ slotProps.data｜

slot

例：

  <template #slot-scope="{slotProps}">
    <div class="li">{{ slotProps.data.text }}</div>
  </template>

Git地址：https://gitee.com/fcli/vue-virtually-list.git