前端开发虚拟列表

前端开发虚拟列表主要有以下几个原因：

性能优化：当要展示的数据量非常大时，如果一次性将所有数据都渲染到页面上，会导致浏览器的性能下降，出现卡顿、加载缓慢等问题。虚拟列表只渲染当前视口可见部分的数据，大大减少了渲染的节点数量，提高了页面的性能和响应速度。
例如，一个包含数万条记录的列表，如果全部渲染，可能会使浏览器内存占用过高，而虚拟列表只渲染当前能看到的几十条。
提高用户体验：快速的响应和流畅的滚动能够提供更好的用户体验。用户在滚动列表时，不会因为大量数据的渲染而感到卡顿，能够更流畅地浏览数据。
比如，在移动端浏览长列表时，如果加载缓慢或卡顿，用户可能会感到烦躁并放弃操作。
节省资源：减少了不必要的 DOM 操作和计算，降低了 CPU 和内存的消耗。
以一个具有复杂样式和交互的长列表为例，虚拟列表避免了为不可见部分创建和维护 DOM 元素，节省了系统资源。
适应不同设备和网络环境：无论是在低性能设备上还是在网络条件较差的情况下，虚拟列表都能够保证页面的基本可用性和较好的性能。
比如，在老旧手机或网络不稳定的情况下，虚拟列表能更快地加载和响应。
动态数据更新：对于实时更新的数据，虚拟列表能够更高效地处理数据的添加、删除和修改，只更新可见区域的数据，避免了对整个列表的重新渲染。
例如，实时聊天消息列表，新消息不断加入，虚拟列表能快速更新显示。

<template>
  <div class="list-container">
    <div class="list-item"
         v-for="(item, index) in displayedItems"
         :key="startIndex + index"
         :style="{ height: itemHeight + 'px' }">
      <!-- 渲染每一项的内容 -->
      {{ item }}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // 列表每一项数据的固定高度
    itemHeight: {
      type: Number,
      required: true,
    },
    // 列表展示的数据源
    items: {
      type: Array,
      required: true,
    },
    // 可视区域的高度
    viewHeight: {
      type: Number,
      required: true,
    },
  },
  data() {
    return {
      // 当前可视区域首位元素的索引
      startIndex: 0,
      // 当前可视区域末尾元素的索引
      endIndex: 0,
      // 实际渲染的数据
      displayedItems: [],
    };
  },
  mounted() {
    this.updateVisibleData();
    window.addEventListener('scroll', this.updateVisibleData);
  },
  watch: {
    items() {
      this.startIndex = 0;
      this.endIndex = 0;
      this.updateVisibleData();
    },
  },
  methods: {
    // 计算当前可视区域的起始索引和结束索引
    updateVisibleData() {
      const scrollTop = window.pageYOffset; 
      const visibleHeight = this.viewHeight + scrollTop; 
      const startIndex = Math.floor(scrollTop / this.itemHeight); 
      const endIndex = Math.ceil(visibleHeight / this.itemHeight); 
      if (startIndex!== this.startIndex || endIndex!== this.endIndex) {
        this.startIndex = startIndex;
        this.endIndex = endIndex;
        this.displayedItems = this.items.slice(startIndex, endIndex); 
      }
    },
  },
};
</script>

<style scoped>
.list-container {
  overflow: auto; 
}
.list-item {
  box-sizing: border-box; 
}
</style>

以上就是文章全部内容了，如果喜欢这篇文章的话，还希望三连支持一下，感谢！

原文地址：https://blog.csdn.net/weixin_43891869/article/details/140548419

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！