虚拟列表 vue-virtual-scroller 的使用

npm 详情：vue-virtual-scroller - npm (npmjs.com)

这里我使用的是RecycleScroller。

App.vue

<template>
 <RecycleScroller
     class="scroller"
     :items="items"
     :item-size="54"
     v-slot="{ item }"
 >
   <list-item :item="item"></list-item>
 </RecycleScroller>
</template>

<script>
import {RecycleScroller} from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
import ListItem from "@/components/ListItem.vue";

// items 是一个对象数组， item 传递给 ListItem 组件 是包含了对象数组的对象
var items = []
for (let i = 0; i < 10000; i++) {
 items.push({
   id: i + 1,
   name: 'User ' + (i + 1),
 })
}
export default {
 components: {
   ListItem,
   RecycleScroller
 },
 data() {
   return {
     items: items
   }
 }
}
</script>

<style scoped>
.scroller {
 height: 50vh;
 width: 50vw;
 background-color: #f5f5f5;
 padding: 10px;

}
</style>
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

ListItem.vue

<script>

export default {
  props: {
    item: Object
  }
}
</script>

<template>
  <div class="list-item">
    <span>id{{item.id}}</span>
    <span>name{{item.name}}</span>
    <span>age{{item.count}}</span>
  </div>
</template>

<style scoped>
.list-item {
  text-align: center;
  height: 54px;
  padding: 1em;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}
</style>
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