VirtualList 虚拟列表 vue3 版本

当列表的数据量很大时，使用虚拟列表呈现内容。

组件注册

import VirtualList from 'vue-virtual-list-v3';

app.use(VirtualList);

基本用法

<div class="container">
     <VirtualList class="list-dynamic scroll-touch"
          :data-key="'id'"
          :data-sources="items"
          :estimate-size="80"
          :item-class="'list-item-dynamic'"
          ref="virtualList"
        >
        <template #={source}>
            <div class="item-inner">
                <div class="head">
                    <span># {{ source.index }}</span>
                    <span>{{ source.name }}</span>
                </div>
                <div class="desc">{{ source.desc }}</div>
            </div>
        </template>
      </VirtualList>
</div>

items 数据示例：

[
  {
    "index":1,
    "name":"0.8952834111006784",
    "id":"1$d9ec7a",
    "desc":"html5",
    "size":150
  }
]

响应式数据配置示例：

let items = ref(DataItems); // DataItems is origin data
const addItem = () => {
    DataItems.push({
        index: Math.random() * 1000 + 1,
        name: "Brad" + Math.random() * 1000 + 1,
        id: Date.now(),
        desc: "html5",
        size: 150,
    });
    items.value = JSON.parse(JSON.stringify(DataItems));
};

虚拟列表属性和方法

必须的属性

属性	类型	描述
data-key	String|Function	从data-sources中的每个数据对象获取唯一键。或者使用每个数据源调用函数并返回其唯一键。其值在数据源中必须是唯一的，用于标识每一项的尺寸。
data-sources	Array[Object]	为列表生成的源数组，每个数组数据必须是一个对象，并且具有唯一的key get或generate fordata key属性。

其他属性

属性	类型	默认值	描述
keeps	Number	30	您期望虚拟列表在真实 dom 中保持渲染的项目数量。
extra-props	Object	{}	分配给组件一些不在data-sources中的属性. 注意: index 和 source 都被内部占用了.
estimate-size	Number	50	每个Item的估计大小，如果它更接近平均大小，滚动条长度看起来更准确。建议指定自己计算的平均值。
start	Number	0	设置滚动位置保持开始索引。
offset	Number	0	设置滚动位置保持偏移。
scroll	Event		滚动时触发, 参数 (event, range)。
totop	Event		当滚动到顶部或者左边时触发, 无参数。
tobottom	Event		当滚动到底部或者右边时触发，无参数。
resized	Event		当大小改变时触发 (mounted), 参数 (id, size)。
direction	String	vertical	滚动的方向, 可选值为 vertical 和 horizontal。
top-threshold	Number	0	发出totop 事件的阈值, 注意多个调用。
bottom-threshold	Number	0	发出tobottom 事件的阈值, 注意多个调用。
root-tag	String	div	根节点的名称。
wrap-tag	String	div	列表包裹元素名称(role=group)。
wrap-class	String		列表包裹元素类名。
wrap-style	Object	{}	列表包裹元素内联样式。
item-tag	String	div	项目包裹元素名称。
item-class	String		项目包裹元素类名。
item-class-add	Function		一个函数，您可以将额外的类（字符串）返回给项包装器元素， 参数 (index)。
item-style	Object	{}	项目包裹元素内联样式。
item-scoped-slots	Object	{}	Item组件的 slot。

公共方法

方法	描述
reset()	将所有状态重置回初始状态。
scrollToBottom()	手动将滚动位置设置为底部。
scrollToIndex(index)	手动将滚动位置设置为指定索引。
scrollToOffset(offset)	手动将滚动位置设置为指定的偏移量。
getSize(id)	按id（从data-key）获取指定的项目大小。如果已渲染列表中没有该项，则返回undefined。
getSizes()	获取存储（渲染）项的总数。
getOffset()	获取当前滚动偏移量。
getClientSize()	获取包装器元素客户端视口大小（宽度或高度）。
getScrollSize()	获取所有滚动大小（滚动高度或滚动宽度）。