vue虛擬滾動/虛擬列表簡單實現(xiàn)示例

更新時間：2025年01月10日 09:30:48 作者：llh_fzl

本文主要介紹了vue虛擬滾動/虛擬列表簡單實現(xiàn)示例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

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>