https://github.com/993576769/virtual-list

Virtual scroll component for Vue3
https://github.com/993576769/virtual-list

typescript virtual-list vite vue vue3 vue3-component vuejs

Last synced: about 1 month ago
JSON representation

Virtual scroll component for Vue3

• Host: GitHub
• URL: https://github.com/993576769/virtual-list
• Owner: 993576769
• Created: 2024-10-08T08:44:54.000Z (3 months ago)
• Default Branch: main
• Last Pushed: 2024-10-28T03:01:50.000Z (about 2 months ago)
• Last Synced: 2024-10-28T05:35:25.418Z (about 2 months ago)
• Topics: typescript, virtual-list, vite, vue, vue3, vue3-component, vuejs
• Language: Vue
• Homepage: https://993576769.github.io/virtual-list/
• Size: 529 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 6
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Virtual List Component Documentation

[![Build](https://github.com/993576769/virtual-list/actions/workflows/build.yml/badge.svg)](https://github.com/993576769/virtual-list/actions/workflows/build.yml)

[![Publish](https://github.com/993576769/virtual-list/actions/workflows/publish.yml/badge.svg)](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).