VirtualList 虚拟列表 vue3 版本

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

更新日志

1.5.4 版本修复非pageMode模式下数据不更新问题

1.5.2 版本新增pageMode模式

1.5.0 版本新增 container-class 属性，用户可以自主设置高度/宽度

组件注册

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

app.use(VirtualList);

在线示例

1、点我查看完整在线示例

2、pageMode live demo

基本用法

<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属性。 |

其他属性

公共方法

Props type

Required props

|              Prop              | Type | Description | |------------------|------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | data-key | String|Function | The unique key get from data-sources in each data object. Or a function called with each data-source and return their unique key. Its value must be unique in data-sources, it is used for identifying item size. | | data-sources | Array[Object] | The source array built for list, each array data must be an object and has an unique key get or generate for data-key property. |

Optional props

Public methods