【vue】vue3-虚拟列表组件

思路

只渲染可视区域的数据项

  • 滚动时动态计算开始项的索引。
  • 通过开始项索引计算出结束索引。
  • 有了开始结束索引，使用 slice 切割原始数组，得到新数组（实际渲染的数据）。

滚动条的实现

  • 使用一个空白的占位元素，通过计算数据总高度，设置其高。

内容始终在中间

  • 滚动时记录偏移量，使用 position: top 定位 或者 transform: translate 让可视区域始终在中间，不会滚动上移。

实现

RocVirtualList.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<template>
  <div class="roc-virtual-list" :style="{ height: `${height}px` }" @scroll="handleScroll">
    <div class="roc-virtual-list-phantom" :style="{ height: `${listHeight}px` }"></div>
    <div class="roc-virtual-list-content" :style="{ transform: `translate3d(0, ${offset}px, 0)` }">
      <div v-for="item in visibleData" :key="item.id" class="roc-virtual-list-item" :style="{ height: `${itemHeight}px` }">
        <slot :item="item"></slot>
      </div>
    </div>
  </div>
</template>

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

  // 定义 props
  const props = defineProps({
    listData: {
      type: Array,
      required: true,
    },
    height: {
      type: Number,
      required: true,
    },
    itemHeight: {
      type: Number,
      required: true,
    },
  });

  // 响应式数据
  const offset = ref(0);
  const start = ref(0);

  // 计算属性
  const listHeight = computed(() => props.listData.length * props.itemHeight);
  const visibleCount = computed(() => Math.ceil(props.height / props.itemHeight) + 2); // 向上取整 + 多渲染两条
  const visibleData = computed(() => {
    const start_index = start.value;
    const end_index = start.value + visibleCount.value;
    return props.listData.slice(start_index, end_index);
  });

  // 滚动处理
  const handleScroll = (e) => {
    const scrollTop = e.target.scrollTop;
    start.value = Math.floor(scrollTop / props.itemHeight); // 此处向下取整 和 visibleCount 向上取整正好抵消 （这样计算的数据 visibleData 的数量符合预期的数量）
    offset.value = scrollTop;
  };

  // 监听数据变化
  watch(
    () => props.listData,
    () => {
      offset.value = 0;
      start.value = 0;
    },
    { deep: true }
  );
</script>

<style scoped>
  .roc-virtual-list {
    position: relative;
    overflow-y: auto;
    border: 1px solid #e8e8e8;
  }

  .roc-virtual-list-phantom {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    z-index: -1;
  }

  .roc-virtual-list-content {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    will-change: transform;
  }

  .roc-virtual-list-item {
    font-size: 16px;
    border-bottom: 1px solid #e8e8e8;
    box-sizing: border-box;
    display: flex;
    align-items: center;
  }
</style>

使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<template>
  <div class="list-page">
    <RocVirtualList :listData="listData" :height="400" :itemHeight="40">
      <template #default="{ item }"> {{ item.id }} - {{ item.content }} </template>
    </RocVirtualList>
  </div>
</template>

<script setup>
  import RocVirtualList from "@/components/RocVirtualList/RocVirtualList.vue";
  import { ref } from "vue";

  const listData = ref([]);
  setData();
  function setData() {
    for (let i = 0; i < 500000; i++) {
      listData.value.push({
        id: i + 1,
        content: `数据${i}`,
      });
    }
  }
</script>