https://github.com/993576769/virtual-list
Virtual list component for Vue3
https://github.com/993576769/virtual-list
typescript virtual-list vite vue vue3 vue3-component vuejs
Last synced: 4 months ago
JSON representation
Virtual list component for Vue3
- Host: GitHub
- URL: https://github.com/993576769/virtual-list
- Owner: 993576769
- Created: 2024-10-08T08:44:54.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-08T16:14:52.000Z (over 1 year ago)
- Last Synced: 2025-11-22T22:03:20.761Z (7 months ago)
- Topics: typescript, virtual-list, vite, vue, vue3, vue3-component, vuejs
- Language: Vue
- Homepage: https://993576769.github.io/virtual-list/
- Size: 237 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Virtual List Component Documentation
[](https://github.com/993576769/virtual-list/actions/workflows/build.yml)
[](https://github.com/993576769/virtual-list/actions/workflows/publish.yml)
## Demo
[https://993576769.github.io/virtual-list/](https://993576769.github.io/virtual-list/)
## Installation
```bash
npm install @a993576769/virtual-list
```
## Virtual List Component
### Props
| Prop Name | Type | Default | Description |
|-----------|------|---------|-------------|
| `items` | `Array` | 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[]>` | Array of currently visible items |
| `renderItems` | `Ref[]>` | Array of all rendered items, including buffer |
| `scrollToItem` | ``({ key: T[keyof T]; alignment: `start` \| `center` \| `end`; smooth?: boolean }) => Promise`` | Scrolls to a specific item |
| `scrollToTop` | `(smooth?: boolean) => void` | Scrolls to the top of the list |
| `scrollToBottom` | `(smooth?: boolean) => Promise` | 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:
```vue
import { VirtualList, VirtualListItem } from '@a993576769/virtual-list';
import { ref } from 'vue';
const myItems = ref([/* your items array */]);
```
## License
This project is licensed under the [MIT license](https://opensource.org/licenses/MIT).