RecycleScroller虚拟列表的实战。
背景
当渲染大型列表时，由于浏览器需要处理大量的 DOM 节点，会带来页面卡顿、内存占用过高等问题。此时可以通过将列表虚拟化技术，即只渲染可见区域内的数据项，而不是全部渲染，且在滚动过程中移除旧的添加新的，这样无论列表有多少项，只会有一小部分在DOM中，从而提高性能和内存效率、保持流畅的滚动体验。
vue-virtual-scroller正是一个实现了列表和表格虚拟滚动的社区库，主要提供两个组件：
-
RecycleScroller：一个基础的虚拟滚动列表，需要item高度是固定的 -
DynamicScroller：一个更高级的虚拟滚动列表，可以处理动态的item高度
这里以RecycleScroller为例，先安装和导入：
// 安装
npm install --save vue-virtual-scroller@next
// 导入RecycleScroller
import { RecycleScroller } from "vue-virtual-scroller";
import "vue-virtual-scroller/dist/vue-virtual-scroller.css";
app.component("RecycleScroller", RecycleScroller);
RecycleScroller实战
RecycleScroller提供很多属性，主要使用到以下四个核心属性，接下来依次解释：
<RecycleScroller
v-slot="{ item, index, active }"
:items="items"
:item-size=""
key-field=""
>
<div class="item-root">
...
</div>
</RecycleScroller>
v-slot
当前渲染item的相关信息，提供信息包括：
-
item：当前渲染的item数据，即items[index] -
index: 当前渲染的item所在位置 -
active：当前渲染的item是否可见
items
必填，渲染的列表数据源。注意，如果数据源有变化，比如上拉刷新、下拉加载更多，此时需要修改items属性，否则RecycleScroller不会更新items，参考官方demo的做法：
const items = computed(() => {
return props.list.map((item) =>
Object.assign({}, { random: Math.random() }, item),
);
});
item-size
必填，item的高度。若有必要需适配手机端和网页端。
key-field
关键属性名，这个属性是item唯一标识，默认名称是id。一般在数据会有提供如key、id、index这样的属性，如果都没有的话，需要对源数据进行加工补充一个id属性。如果不存在这个属性或属性值不唯一，会发现列表存在空白项，即渲染异常的item。
const items = computed(() => {
return props.list.map((item, index) =>
Object.assign({}, { id: `test-${index}` }, item),
);
});
实际应用一下，现在有这样一个长列表，可以看到dom树很长：
相关代码如下：
<div class="output-content-container">
<div
v-for="(item) in props.data"
class="output-item-root"
>
...
</div>
</div>
.output-content-container {
width: 100%;
display: flex;
flex-direction: column;
}
改用RecycleScroller仅需要改几行代码：
<RecycleScroller
v-slot="{ item }"
class="output-content-container"
:item-size="isMobileRef ? 100 : 75"
:items="items"
>
<div class="output-item-root">
...
</div>
</RecycleScroller>
const items = computed(() => {
return props.data.map((item, index) =>
Object.assign({}, { id: `data-id-${index}` }, item),
);
});
.output-content-container {
width: 100%;
max-height: 100vh;
}
需要强调的一点是，RecycleScroller的可视高度一定是可知的，比如这里设置了最大高度和屏幕高度一样，否则它无法计算出来哪些列表项是在可视区内的，会认为全部能展示，导致复用能力失效。改完后能成功复用了：
template
在这个例子中还有一处细节，就是滑动效果发生变化了，可以看到原来只有一个页面整体的滑动条（右），现在内部多了一个的滑动条（左）：
这个很好理解，RecycleScroller本身也要知道渲染视图和滚动位置，如果想和原有保持一致，也就是将列表上方的信息和列表拼接一起成为一个整体，只要将头部信息填空到#before中即可，代码如下：
<RecycleScroller
class="output-content-container"
:item-size="isMobileRef ? 100 : 75"
:items="items"
>
<template #before>
...
</template>
<template v-slot="{ item }">
<div class="output-item-root">
...
</div>
</template>
</RecycleScroller>
网格布局
RecycleScroller还可以实现网格布局，还要涉及两个关键属性：
-
item-secondary-size：item宽度，未设置时会使用item-size的值 -
grid-items：一行展示的个数，即列数
比如优化这样一个网格列表：
修改前：
<div class="content-gridview">
<div
v-for="(item, index) in items"
class="content-grid-item"
@click="onChooseItem(item)"
>
...
</div>
</div>
.content-gridview {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 10px;
max-height: 600px;
}
修改后：
<RecycleScroller
v-slot="{ item, index }"
:item-secondary-size="360"
:item-size="90"
:items="items"
:grid-items="2"
key-field="indexId"
class="content-gridview"
>
<div class="content-grid-item" @click="onChooseItem(item)">
...
</div>
</RecycleScroller>
.content-gridview {
max-height: 600px;
}
.content-grid-item {
...
margin-right: 10px;
}
由于不支持设置grid-gap，这里通过给item设置右间距方式实现的，最终效果：
网友评论