Meri Plus虚拟列表 VirtualList
3.2.117 版本开始提供该组件。
示例
固定尺寸
动态尺寸
设定 item-resizable 它可以渲染不固定大小的项目。
属性
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| default-scroll-key | string | number | undefined | 默认滚动的 Key |
| default-scroll-index | number | undefined | 默认滚动的 Index |
| ignore-item-resize | boolean | false | 忽略内容尺寸变化，可以让运行快一些（尽管应该很难感受到） |
| items | Array<object> | [] | 需要展示的数据 |
| item-resizable | number | false | 是否启用动态尺寸，你不必关心项目大小，它会自动计算 |
| item-size | number | required | 以像素为单位显示项目的最小高度，用于计算滚动大小和位置 |
| items-style | string | CSSProperties | undefined | 全部内容的容器样式 |
| key-field | string | 'key' | 选项 key 的字段名 |
| padding-top | string | number | undefined | 距离上部的距离 |
| padding-bottom | string | number | undefined | 距离底部的距离 |
| scrollbar-props | ScrollbarProps | undefined | 属性参考 Scrollbar props |
| visible-items-tag | string | 'div' | 全部内容的容器标签 |
| visible-items-props | object | undefined | 全部内容的容器属性 |
| on-scroll | (event: Event) => void | undefined | 滚动的回调函数 |
| on-wheel | (event: WheelEvent) => void | undefined | 滚轮事件的回调函数 |
| on-resize | (event: ResizeObserverEntry) => void | undefined | 元素大小调整的回调函数 |
| 名称 | 参数 | 说明 |
|---|---|---|
| scrollTo | ScrollTo | 滚动到某个位置 |