vue-virtual-list-v3 v1.5.6-beta.0

VirtualList 虚拟列表 vue3 版本

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

组件注册

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([]); 
const addItem = () => {
    items.value.push({
        index: Math.random() * 1000 + 1,
        name: "Brad" + Math.random() * 1000 + 1,
        id: Date.now(),
        desc: "html5",
        size: 150,
    });
};

更新日志

1.5.5 版本修复dataSources变化时，列表不更新的问题

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

1.5.2 版本新增pageMode模式

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

虚拟列表属性和方法

必须的属性

其他属性

公共方法

Props type

Required props

Optional props

Public methods