<script lang='ts' setup>
  type Item = {
    id: number
    name: string
  }
  const allListData = ref<Item[]>([])	// 存放十萬條數(shù)據(jù)
  const itemHeight = ref(40) // 每一條（項(xiàng)）的高度
  const count = ref(10) // 一屏展示幾條數(shù)據(jù)
  const startIndex = ref(0) // 開始位置的索引
  const endIndex = ref(10) // 結(jié)束位置的索引
  const topVal = ref(0) // 父元素滾動(dòng)位置

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

  // 模擬十萬條數(shù)據(jù)
  const getData = async () => {
    for (let i = 0; i < 10000; i++) {
      allListData.value.push({ name: `第${i}條數(shù)據(jù)`, id: i })
    }
  }

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

  // 虛擬列表視口區(qū)域的組件實(shí)例
  const viewport = ref<HTMLDivElement>()

    const handleScroll = () => {
      console.log('滾動(dòng)了')
      // 非空判斷
      if (!viewport.value) return
      // 獲取滾動(dòng)距離（這里通過組件實(shí)例獲取的，當(dāng)然也可以通過在該事件的事件參數(shù)中拿到）
      const scrollTop = viewport.value.scrollTop
      // 計(jì)算起始下標(biāo)和結(jié)束下標(biāo)，用于 computed 計(jì)算
      startIndex.value = Math.floor(scrollTop / itemHeight.value)
      endIndex.value = startIndex.value + count.value
      // 動(dòng)態(tài)更改定位的 top 值，動(dòng)態(tài)展示相應(yīng)內(nèi)容
      topVal.value = viewport.value.scrollTop
    }
</script>

<template>
  <!-- 虛擬列表容器 -->
  <div
    class="viewport"
    ref="viewport"
    :style="{ height: 10條數(shù)據(jù)撐開的高度 }"
    >
    <!-- 占位元素，高度為所有的數(shù)據(jù)的總高度 -->
    <div
      class="placeholder"
      :style="{ height:itemHeight * count + 'px' }"
      ></div>
    <!-- 視圖區(qū)，展示10條數(shù)據(jù)，注意其定位的top值是變化的 -->
    <div class="list" :style="{ top: topVal + 'px' }">
      <!-- 每一條（項(xiàng)）數(shù)據(jù) -->
      <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;
  // 開啟滾動(dòng)條
  overflow-y: auto;
  // 開啟相對(duì)定位
  position: relative;
  .list {
  width: 100%;
  height: auto;
  // 搭配使用絕對(duì)定位
  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>