Vue2 - vue-virtual-scroller 长列表优化原理




<template>
  <vue-virtual-scroller
    :items="items"
    :item-height="50"
    :remain="5"
  >
    <template v-slot:default="{ item }">
      <div>{{ item.text }}</div>
    </template>
  </vue-virtual-scroller>
</template>
 
<script>
import VueVirtualScroller from 'vue-virtual-scroller'
 
export default {
  components: {
    VueVirtualScroller
  },
  data() {
    return {
      items: Array.from({ length: 10000 }, (_, index) => ({ id: index, text: `Item ${index}` }))
    }
  }
}
</script>

这个例子展示了如何使用vue-virtual-scroller组件来渲染一个包含10000个项目的长列表。通过指定item-height为50px和remain为5，组件将只渲染当前视口所需的最小DOM元素数量，从而极大地提高了长列表的渲染和滚动性能。

Vue2 - vue-virtual-scroller 长列表优化原理

评论已关闭

推荐阅读