vue3 虚拟列表 渲染十万条数据

<template>
  <div ref="listRef" class="infinite-list-container" @scroll="scrollEvent($event)">
    <div :style="{ height: listHeight + 'px' }" class="infinite-list-phantom"></div>
    <div :style="{ transform: getTransform }" class="infinite-list">
      <div v-for="item in visibleData" :key="item.id" ref="items"
           :style="{ height: itemSize + 'px', backgroundColor: item.color }" 
           class="infinite-list-item">
           {{ item.value }} - {{ item.color }}
      </div>
    </div>
  </div>
</template>

<script setup>
import {onMounted} from "vue";

// list元素
let listRef = $ref()
// 数据总列表
let listData = $ref([])
// 每个item的高度
let itemSize = $ref(120)
// 可视区域高度
let screenHeight = $ref(0)
// 偏移量
let startOffset = $ref(0)
// 起始索引
let start = $ref(0)
// 结束索引
let end = $ref(null)

// 列表总高度
let listHeight = $computed(() => {
  return listData.length * itemSize;
})

// 可显示的列表项数
let visibleCount = $computed(() => {
  return Math.ceil(screenHeight / itemSize)
})

// 偏移量对应的style
let getTransform = $computed(() => {
  return `translate3d(0,${startOffset}px,0)`;
})

// 获取真实显示列表数据
let visibleData = $computed(() => {
  return listData.slice(start, Math.min(end, listData.length));
})

function scrollEvent() {
  // 当前滚动位置
  let scrollTop = listRef.scrollTop;
  // 此时的开始索引
  start = Math.floor(scrollTop / itemSize);
  // 此时的结束索引
  end = start + visibleCount;
  // 此时的偏移量
  startOffset = scrollTop - (scrollTop % itemSize);
}

// 随机颜色
function randomColor(alpha) {
  alpha = alpha == undefined ? (Math.random() * 10 / 10).toFixed(1) : alpha;
  alpha = Number(alpha);
  if (isNaN(alpha)) alpha = 1;
  let col = "rgba(";
  for (let i = 0; i < 3; i++) {
    col += ~~(Math.random() * 256) + ",";
  }
  col += alpha + ")";
  return col;
}

onMounted(() => {
  screenHeight = document.documentElement.clientHeight;
  start = 0;
  end = start + visibleCount;
  // 模仿接口数据
  for (let i = 0; i < 100000; i++) {
    listData.push({
      id: i,
      value: i,
      color: randomColor()
    });
  }
})
</script>

.infinite-list-container {
  height: calc(100vh - 55px);
  overflow: auto;
  position: relative;
  -webkit-overflow-scrolling: touch;
}

.infinite-list-phantom {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  z-index: -1;
}

.infinite-list {
  left: 0;
  right: 0;
  top: 0;
  position: absolute;
  text-align: center;
}

.infinite-list-item {
  padding: 10px;
  color: #555;
  box-sizing: border-box;
  border-bottom: 1px solid #999;
  display: flex;
  align-items: center;
  justify-content: center;
}