// App.vue
<script>
const list = (num = 10)=> {
  const data = [];
  for (let i = 0; i < num; i++) {
    data.push({
      id: i+1,
      name: `第 ${i+1} 條列表`
    });
  }
  return data;
}
</script>
<template>
  <VirtualScroll :data="list(100)" />
</template>
// VirtualScroll.vue
<template>
  <!-- 虛擬滾動內(nèi)容 -->
  <div
    class="virtual-scroller"
    @scroll="onScroll"
    :style="{ height: containerHeight + 'px' }"
  >
    <!-- 實際渲染的列表內(nèi)容 -->
    <ul
      class="real-list-content"
      :style="{ transform: `translateY(${tranlateY}px)` }"
    >
      <li
        v-for="item in visibleList"
        :key="item.id"
        :style="{
          height: `${listItemHeight}px`,
          'line-height': `${listItemHeight}px`,
        }"
      >
        <div>{{ item.name }}</div>
      </li>
    </ul>
    <!-- 虛擬列表元素 -->
    <div class="virtual-height" :style="{ height: virtualHeight + 'px' }">
      ~ 數(shù)據(jù)加載完畢 ~
    </div>
  </div>
</template>
<script>
export default {
  name: "vue-virtual-scroll",
};
</script>
<script setup language="ts">
import { computed, ref } from "vue";
const props = defineProps({
  data: {
    type: Array,
    default: [],
  },
  startIndex: {
    type: Number,
    default: 0,
  },
  endIndex: {
    type: Number,
    default: 10,
  },
  listItemHeight: {
    type: Number,
    default: 60,
  },
  containerHeight: {
    type: Number,
    default: 500,
  },
});
let { data, listItemHeight } = props;
const tranlateY = ref(0); // 平移距離
const startIndex = ref(props.startIndex); // 開始索引
const endIndex = ref(props.endIndex); // 結(jié)束索引
// 實際渲染的數(shù)據(jù)
const visibleList = computed(() => {
  return data.slice(startIndex.value, endIndex.value);
});
// 虛擬滾動的高度
const virtualHeight = computed(() => {
  return (data.length - visibleList.value.length) * listItemHeight + listItemHeight;
});
// 滾動事件
const onScroll = (e) => {
  const eleScrollTop = e.target.scrollTop;
  // 保證實際渲染列表一直停留在可視區(qū)
  tranlateY.value = eleScrollTop;
  // 根據(jù)實際的滾動距離，動態(tài)計算列表開始索引
  startIndex.value = Math.floor(eleScrollTop / listItemHeight);
  // 基于開始索引
  endIndex.value = startIndex.value + 10;
};
</script>
<style scoped>
.virtual-scroller {
  border: solid 1px #eee;
  margin-top: 10px;
  height: 600px;
  overflow: auto;
}
.virtual-height {
  background: red;
  display: flex;
  align-items: end;
  justify-content: center;
  color: #fff;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
li {
  outline: solid 1px #fff;
  background-color: #000;
  color: #fff;
}
</style>