vue3-virt-list 虚拟列表 虚拟滚动列表

快速开始

Options API

<template>
  <div style="width: 500px; height: 400px">
    <VirtList itemKey="id" :list="list" :minSize="20">
      <template #default="{ itemData, index }">
        <div>{{ index }} - {{ itemData.id }} - {{ itemData.text }}</div>
      </template>
    </VirtList>
  </div>
</template>

<script>
  import { VirtList } from 'yt-virtual-scroll-list-vue3';
  export default {
    components: { VirtList },
    data() {
      return {
        list: [{ id: 0, text: 'text' }],
      };
    },
  };
</script>

Composition API

<template>
  <div style="width: 500px; height: 400px">
    <VirtList itemKey="id" :list="list" :minSize="20">
      <template #default="{ itemData, index }">
        <div>{{ index }} - {{ itemData.id }} - {{ itemData.text }}</div>
      </template>
    </VirtList>
  </div>
</template>

<script setup lang="ts">
  import { VirtList } from 'yt-virtual-scroll-list-vue3';

  const list = [{ id: 0, text: 'text' }];
</script>

组件属性参数说明

| 参数 | 说明 | 类型 | 默认值 | 是否必须 | | ---- | ---- | ---- | ---- | ---- | | list | 数据 | Array | - | 是 | | itemKey | 项的 id，必须唯一 | String Number | - | 是 | | minSize | 最小尺寸，会根据这个尺寸来计算可视区域内个数 | Number | 20 | 是 | | fixed | 是否为固定高度，可以提升性能 注意：动态高度模式下，请勿使用 | Number | false | - | | buffer | 当渲染量大，滚动白屏严重时，可以给定数值，bufferTop 和 bufferBottom 会等于 buffer | Number | 0 | - | | bufferTop | 顶部 buffer 个数 | Number | 0 | - | | bufferBottom | 底部 buffer 个数 | Number | 0 | - | | horizontal | 是否水平滚动 | Boolean | false | - | | fixSelection | 是否需要修复滚动丢失selection问题(仅vue2下需要和生效) | Boolean | false | - | | start | 起始渲染下标 | Number | 0 | - | | offset | 起始渲染顶部高度 | Number | 0 | - | | listStyle | 列表容器样式 | String | '' | - | | listClass | 列表容器类名 | String | '' | - | | itemStyle | item容器样式 | String | '' | - | | itemClass | item容器类名 | String | '' | - | | renderControl | 渲染控制器 | (begin: number, end: number ) => { begin: number; end: number } | - | - |

组件插槽参数说明

| name | 说明 | | ---- | ---- |
| header | 顶部插槽 | | footer | 底部插槽 | | sticky-header | 顶部悬浮插槽 | | sticky-footer | 底部悬浮插槽 | | default | item 内容， 作用域参数为 { itemData, index } |

组件事件说明

| 方法名 | 说明 | 参数 | | ---- | ---- | ---- | | toTop | 触顶的回调 | 列表中第一项 | | toBottom | 触底的回调 | 列表中最后一项 | | scroll | 滚动的回调 | event | | itemResize | Item 尺寸发生变化 | { id: string, newSize: number } |

组件暴露方法

| 方法名 | 说明 | 参数 | | ---- | ---- | ---- | | reset | 重置列表 | - | | getOffset | 获取滚动高度 | - | | scrollToTop | scroll to top | - | | scrollToBottom | scroll to bottom | - | | scrollToIndex | scroll to index | - | | scrollInToView | scroll to index if needed（不在可视范围内） | index | | scrollToOffset | scroll to px | px | | getItemSize | 获取指定item尺寸 | index | | getItemPosByIndex | 获取指定item的位置信息: { top: number; current: number; bottom: number;} | index | | forceUpdate | 强制更新 | - |