Introduction
vue3-infinite-scroll is a powerful and tiny infinite scroll library for vue3.
Features
- Tiny, only 4kb after gzip
- Support vertical and horizontal mode
- Display millions of data
- Set scroll index、offset or alignment to show specific data
try all examples on this link.
Install
npm
npm install @binbinji/vue3-infinite-scroll --save
yarn
yarn add @binbinji/vue3-infinite-scroll
import InfiniteScroll from '@binbinji/vue3-infinite-scroll'Props
| Property | Type | Required? | Description |
|---|---|---|---|
| width | number / string | ✓ | The width of container. This property will determine the number of rendered items when direction is 'horizontal'
|
| height | number / string | ✓ | The height of container. This property will determine the number of rendered items when direction is 'vertical'. |
| data | any[] | ✓ | Data source for scrolling list. |
| itemSize | (index: number): number / number[] / number | Either a fixed height/width (depending on the direction), an array containing the heights of all the items in your list, or a function that returns the height of an item given its index: (index: number): number. |
|
| direction | string | Scrolling direction of the list which optional value is horizontal or vertical. The default value is vertical. |
|
| estimatedSize | number | When the size of each piece of data rendered is not fixed, you can use this property to set an estimated size which default value is 50. |
|
| scrollToOffset | number | Can be used to control the scroll offset; Also useful for setting an initial scroll offset | |
| scrollToIndex | number | Item index to scroll to (by forcefully scrolling if necessary) | |
| scrollToAlignment | string | Used in combination with scrollToIndex, this prop controls the alignment of the scrolled to item. One of: 'start', 'center', 'end' or 'auto'. Use 'start' to always align items to the top of the container and 'end' to align them bottom. Use 'center' to align them in the middle of the container. 'auto' scrolls the least amount possible to ensure that the specified scrollToIndex item is fully visible. |
|
| overscanCount | number | Number of extra buffer items to render above/below the visible items. Tweaking this can help reduce scroll flickering on certain browsers/devices. |
Acknowledgments
This library is transplanted from vue3-infinite-list. Thanks!
License
MIT.