@yinta/yt-virtual-scroll-list-vue3

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	强制更新	-