背景
在页面中显示多行或需要循环大量数据时，页面渲染速度很快变慢。
代码实践
1、安装依赖
npm install vue-virtual-scroller
2、在main.js中引入
1
2
3
4
| import Vue from 'vue'
import VueVirtualScroller from 'vue-virtual-scroller'
Vue.use(VueVirtualScroller)
|
3、在vue组件中使用
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
| <template>
<RecycleScroller
class="scroller"
:items="list"
:item-size="32"
key-field="id"
v-slot="{ item }"
>
<div class="user">
{{ item.name }}
</div>
</RecycleScroller>
</template>
<script>
export default {
props: {
list: Array,
},
}
</script>
<style scoped>
.scroller {
height: 100%;
}
.user {
height: 32%;
padding: 0 12px;
display: flex;
align-items: center;
}
</style>
|