@binbinji/vue3-infinite-scroll NPM

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.