vue虚拟滚动/虚拟列表简单实现

App.vue

<template>
  <div class="container">
    <virtual-list :data="data"/>
  </div>
</template>

<script setup>
import { reactive } from 'vue';
import VirtualList from './components/VirtualList.vue';

const data = reactive((() => {
  const arr = [];
  for (let i = 0; i < 1000000; i++) arr[i] = i;
  return arr;
})());
</script>

<style scoped>
.container {
  width: 400px;
  height: 400px;
}
</style>

virtual-list.vue

<template>
  <div
    class="view"
    :ref="el => viewRef = el"
    @scroll="handleScroll"
  >
    <div
      class="phantom"
      :style="{ height: `${itemSize * data.length}px` }"
    >
    </div>
    <div
      class="list"
      :style="{ transform: `translateY(${translateLen}px)` }"
    >
      <div
        v-for="item in visibleList"
        :style="{ height: `${itemSize}px` }"
      >
        {{ item }}
      </div>
    </div>
  </div>
</template>

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

const props = defineProps({
  data: {
    type: Array,
    default: [],
  },
  itemSize: {
    type: Number,
    default: 32,
  }
})

const translateLen = ref(0);

const viewRef = ref(null);

const start = ref(0);
const visibleCount = computed(() => Math.ceil((viewRef.value?.clientHeight ?? 0) / props.itemSize));
const visibleList = computed(() => props.data.slice(start.value, start.value + visibleCount.value));

const handleScroll = () => {
  const scrollTop = viewRef.value.scrollTop;
  start.value = Math.floor(scrollTop / props.itemSize);

  translateLen.value = scrollTop - (scrollTop % props.itemSize);
}

</script>

<style scoped>
.view {
  position: relative;
  height: 100%;
  overflow: auto;
}

.phantom {
  position: absolute;
  width: 100%;
}

.list {
  position: absolute;
}
</style>

tip

1. item的高度保持一致
2. phantom用于显示一致的滚动条
3. list部分通过translate显示在视区内