0.0.6 • Published 1 year ago
@a993576769/virtual-list v0.0.6
Virtual List Component Documentation
Demo
https://993576769.github.io/virtual-list/
Installation
npm install @a993576769/virtual-listVirtual List Component
Props
| Prop Name | Type | Default | Description |
|---|---|---|---|
items | Array<T> | Required | Array of items to be rendered |
itemHeight | Number | 48 | Height of each item, if fixedHeight is true, this value will be ignored |
buffer | Number | 0 | Number of items to render outside the visible area |
keyField | keyof T | 'id' | Unique key field for each item |
topThreshold | Number | 50 | Threshold for triggering the topArrived event |
bottomThreshold | Number | 50 | Threshold for triggering the bottomArrived event |
initialPosition | 'top' \| 'bottom' \| T[keyof T] | 'bottom' | Initial scroll position |
Events
| Event Name | Parameters | Description |
|---|---|---|
topArrived | None | Triggered when scrolling reaches the top threshold |
bottomArrived | None | Triggered when scrolling reaches the bottom threshold |
scroll | None | Triggered on scroll |
Exposed Methods and Refs
| Name | Type | Description |
|---|---|---|
visibleItems | Ref<RenderedItem<T>[]> | Array of currently visible items |
renderItems | Ref<RenderedItem<T>[]> | Array of all rendered items, including buffer |
scrollToItem | ({ key: T[keyof T]; alignment: `start` \| `center` \| `end`; smooth?: boolean }) => Promise<void> | Scrolls to a specific item |
scrollToTop | (smooth?: boolean) => void | Scrolls to the top of the list |
scrollToBottom | (smooth?: boolean) => Promise<void> | Scrolls to the bottom of the list |
getScroll | () => { scrollHeight: number; scrollTop: number; clientHeight: number } | Returns current scroll information |
Virtual List Item Component
Props
| Prop Name | Type | Required | Description |
|---|---|---|---|
item | T | Yes | The data object for the list item |
index | Number | Yes | The index of the item in the list |
resize | Function | Yes | Callback function to report item height changes |
Usage
To use the Virtual List components together:
<script setup lang="ts">
import { VirtualList, VirtualListItem } from '@a993576769/virtual-list';
import { ref } from 'vue';
const myItems = ref([/* your items array */]);
</script>
<template>
<VirtualList :items="myItems">
<template #default="{ item, index, resize }">
<VirtualListItem :item="item" :index="index" :resize="resize">
<!-- Your item content here -->
</VirtualListItem>
</template>
</VirtualList>
</template>License
This project is licensed under the MIT license.