vue虚拟滚动

<template>
  <div ref="scrollContainer" class="scroll-container" @scroll="handleScroll">
    <div class="scroll-content">
      <div v-for="item in visibleItems" :key="item.id" class="item">
        {{ item.name }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: Array.from({ length: 1000 }, (_, i) => ({ id: i, name: `Item ${i + 1}` })),
      startIndex: 0,
      endIndex: 9,
      itemHeight: 50, // 每个item的高度
      containerHeight: 500, // 容器高度
    };
  },
  computed: {
    visibleItems() {
      return this.items.slice(this.startIndex, this.endIndex + 1);
    },
  },
  methods: {
    handleScroll() {
      const scrollTop = this.$refs.scrollContainer.scrollTop;
      this.startIndex = Math.floor(scrollTop / this.itemHeight);
      this.endIndex = this.startIndex + Math.ceil(this.containerHeight / this.itemHeight) - 1;
    },
  },
  mounted() {
    this.$refs.scrollContainer.style.height = `${this.containerHeight}px`;
    this.$refs.scrollContainer.style.overflow = 'auto';
  },
};
</script>

<style scoped>
.scroll-container {
  border: 1px solid #ccc;
}

.item {
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-bottom: 1px solid #eee;
}
</style>

解释说明

1. 模板部分 (<template>):

   • 使用了一个 div 作为滚动容器，绑定了 @scroll 事件监听滚动。
   • 内部的 div 列表展示了当前可见的项（visibleItems），通过 v-for 循环渲染。

2. 脚本部分 (<script>):

   • data 中定义了总数据项 items，以及用于控制显示范围的 startIndex 和 endIndex。
   • computed 计算属性 visibleItems 根据 startIndex 和 endIndex 动态截取当前可见的数据项。
   • methods 中的 handleScroll 方法在滚动时更新 startIndex 和 endIndex，从而实现虚拟滚动的效果。
   • mounted 生命周期钩子中设置了容器的高度和溢出样式，确保可以滚动。

3. 样式部分 (<style scoped>):

   • 简单的样式定义了容器和项目的外观，包括边框、高度等。

通过这种方式，当用户滚动时，只渲染当前视口内的元素，提高了性能。