详解Vue如何手写一个虚拟列表

<script lang='ts' setup>
  type Item = {
    id: number
    name: string
  }
  const allListData = ref<Item[]>([])	// 存放十万条数据
  const itemHeight = ref(40) // 每一条（项）的高度
  const count = ref(10) // 一屏展示几条数据
  const startIndex = ref(0) // 开始位置的索引
  const endIndex = ref(10) // 结束位置的索引
  const topVal = ref(0) // 父元素滚动位置

  // 计算展示的列表
  const showListData = computed(() => allListData.value.slice(startIndex.value, endIndex.value))

  // 模拟十万条数据
  const getData = async () => {
    for (let i = 0; i < 10000; i++) {
      allListData.value.push({ name: `第${i}条数据`, id: i })
    }
  }

  // 初始化加载
  onMounted(() => {
    getData()
  })

  // 虚拟列表视口区域的组件实例
  const viewport = ref<HTMLDivElement>()

    const handleScroll = () => {
      console.log('滚动了')
      // 非空判断
      if (!viewport.value) return
      // 获取滚动距离（这里通过组件实例获取的，当然也可以通过在该事件的事件参数中拿到）
      const scrollTop = viewport.value.scrollTop
      // 计算起始下标和结束下标，用于 computed 计算
      startIndex.value = Math.floor(scrollTop / itemHeight.value)
      endIndex.value = startIndex.value + count.value
      // 动态更改定位的 top 值，动态展示相应内容
      topVal.value = viewport.value.scrollTop
    }
</script>

<template>
  <!-- 虚拟列表容器 -->
  <div
    class="viewport"
    ref="viewport"
    :style="{ height: 10条数据撑开的高度 }"
    >
    <!-- 占位元素，高度为所有的数据的总高度 -->
    <div
      class="placeholder"
      :style="{ height:itemHeight * count + 'px' }"
      ></div>
    <!-- 视图区，展示10条数据，注意其定位的top值是变化的 -->
    <div class="list" :style="{ top: topVal + 'px' }">
      <!-- 每一条（项）数据 -->
      <div
        v-for="item in showListData"
        :key="item.id"
        class="item"
        :style="{ height: itemHeight + 'px' }"
        >
        {{ item.name }}
      </div>
    </div>
  </div>
</template>

  <style scoped lang="scss">
  .viewport {
  box-sizing: border-box;
  width: 240px;
  border: solid 1px #000000;
  // 开启滚动条
  overflow-y: auto;
  // 开启相对定位
  position: relative;
  .list {
  width: 100%;
  height: auto;
  // 搭配使用绝对定位
  position: absolute;
  top: 0;
  left: 0;
  .item {
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  // 隔行变色
  &:nth-child(even) {
  background: skyblue;
  }
  &:nth-child(odd) {
  background: #fff;
  }
  }
  }
  }
</style>