H5移动端 Vue3 + vue-virtual-scroller 实现长列表性能优化

<template>
  <div class="list-container">
    <RecycleScroller
      :items="items"
      :item-size="50"
      key-field="id"
      v-slot="{ item }">
      <div class="item">{{ item.text }}</div>
    </RecycleScroller>
  </div>
</template>
 
<script>
import { RecycleScroller } from 'vue-virtual-scroller';
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
 
export default {
  components: {
    RecycleScroller
  },
  data() {
    return {
      items: this.generateItems(10000) // 假设有10000个条目
    };
  },
  methods: {
    generateItems(count) {
      return Array.from({ length: count }, (_, index) => ({
        id: index,
        text: `Item ${index}`
      }));
    }
  }
};
</script>
 
<style scoped>
.list-container {
  height: 400px;
  overflow-y: auto;
}
.item {
  height: 50px;
  border-bottom: 1px solid #ccc;
}
</style>

这个代码实例展示了如何在Vue 3应用中使用vue-virtual-scroller创建一个高性能的长列表。通过指定:items和:item-size属性，RecycleScroller组件能够有效地渲染大量的列表条目，而不会影响页面的性能。这个例子中的列表有10000个条目，并且每个条目有一个唯一的id，这有助于vue-virtual-scroller追踪条目的状态。