<template>
  <!--定義一個(gè)大容器，此容器可以滾動(dòng)-->
  <div class="view" ref="viewRef" @scroll="handleScroll">
    <!--定義一個(gè)可以撐滿整個(gè)data的容器，主要是讓父元素滾動(dòng)起來(lái)-->
    <div class="phantom" :style="{ height: `${itemSize * data.length}px` }"></div>
    <!--顯示元素列表   因?yàn)閘ist也是絕對(duì)定位，當(dāng)父元素進(jìn)行滾動(dòng)時(shí)，父元素需要平移來(lái)表示滾動(dòng)(實(shí)際是看到的是沒(méi)有滾動(dòng))-->
    <div class="list" :style="{ transform: `translateY(${translateLen}px)` }">
      <!--顯示每條數(shù)據(jù)-->
      <div v-for="item in visibleList" :style="{ height: `${itemSize}px` }">
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script setup>
import {computed, reactive, ref} from 'vue';

//模擬請(qǐng)求回來(lái)的數(shù)據(jù)
const data = reactive((() => {
  const arr = [];
  for (let i = 0; i < 1000000; i++) arr[i] = i;
  return arr;
})());
// 每條數(shù)據(jù)占據(jù)的高度像素值
const itemSize = 40
// 移動(dòng)的距離
const translateLen = ref(0);
// 綁定的元素
const viewRef = ref(null);
// 從那條數(shù)據(jù)開(kāi)始取值
const start = ref(0);
// 可視區(qū)顯示的條數(shù)
const visibleCount = computed(() => Math.ceil(viewRef.value?.clientHeight / itemSize));
// 可視區(qū)顯示的數(shù)據(jù)內(nèi)容(即需要渲染的所有數(shù)據(jù)內(nèi)容)
const visibleList = computed(() => data.slice(start.value, start.value + visibleCount.value));
// 滾動(dòng)起來(lái)后需要處理的顯示的開(kāi)始位置和要移動(dòng)的距離
const handleScroll = () => {
  const scrollTop = viewRef.value.scrollTop;
  start.value = Math.floor(scrollTop / itemSize);
  console.log("scrollTop==>", scrollTop)
  translateLen.value = scrollTop
  console.log("translateLen.value==>", translateLen.value)
}

</script>

<style scoped>
.view {
  position: relative;
  height: 400px;
  width: 400px;
  overflow: auto;
}

.phantom {
  /* 必須要絕對(duì)定位 */
  position: absolute;
  width: 100%;
  background-color: pink;
}

.list {
  /* 必須要絕對(duì)定位 */
  position: absolute;
}
</style>