vue之虚拟滚动

一、解决的问题

对于大量数据的懒加载，我们可以使用虚拟滚动的技术。虚拟滚动的原理是只渲染可视区域内的数据，当用户滚动时，动态计算并渲染新的可视数据，从而实现大数据量的流畅滚动。

在Vue中，我们可以使用第三方库如vue-virtual-scroller来实现虚拟滚动。

二、实现方式

首先，安装vue-virtual-scroller库：

npm install vue-virtual-scroller

html

三、属性api

RecycleScroller组件的主要属性如下：

• items：数组，需要渲染的数据列表。

• item-size：数字，每个列表项的大小（高度或宽度）。

• key-field：字符串，每个列表项的唯一标识字段。

• page-mode：布尔值，是否使用页面模式。在页面模式下，滚动容器是document.documentElement，否则是RecycleScroller自身。

• direction：字符串，滚动方向，可以是vertical（垂直）或horizontal（水平）。

• buffer：数字，渲染缓冲区大小。增大这个值可以减少滚动时的列表项闪烁，但会增加内存占用。

• prerender：数字，预渲染的列表项数量。

• emitUpdate：布尔值，是否在列表项更新时触发update事件。

以下是一个RecycleScroller的示例：

以上代码中，RecycleScroller会渲染dataList中的数据，每个列表项的高度是50px，使用页面模式和垂直滚动，渲染缓冲区大小是200px，预渲染10个列表项，并在列表项更新时触发update事件。