Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tnfe/vue3-infinite-list
一个支持百万数量级的Vue3无限滚动列表组件
https://github.com/tnfe/vue3-infinite-list
infinite infinite-list vue-infinite-list vue-infinite-scroll
Last synced: 7 days ago
JSON representation
一个支持百万数量级的Vue3无限滚动列表组件
- Host: GitHub
- URL: https://github.com/tnfe/vue3-infinite-list
- Owner: tnfe
- Created: 2022-03-19T03:27:48.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-07-31T09:01:11.000Z (4 months ago)
- Last Synced: 2024-11-06T00:41:50.378Z (14 days ago)
- Topics: infinite, infinite-list, vue-infinite-list, vue-infinite-scroll
- Language: TypeScript
- Homepage: https://tnfe.github.io/vue3-infinite-list
- Size: 757 KB
- Stars: 226
- Watchers: 8
- Forks: 37
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
English | [简体中文](./README.zh-CN.md)
#
> A short and powerful infinite scroll list library for vue, with zero dependencies 💪
- **Tiny & dependency free** – Only 3kb gzipped
- **Render millions of items**, without breaking a sweat
- **Scroll to index** or **set the initial scroll offset**
- **Supports fixed** or **variable** heights/widths
- **Vertical** or **Horizontal** lists
see full examples on this [demo](https://tnfe.github.io/vue3-infinite-list).
## Getting Started
### Using [npm](https://www.npmjs.com/):
```
npm install vue3-infinite-list --save
```
### Using [yarn](https://yarnpkg.com/):
```
yarn add vue3-infinite-list
```
### Import vue Infinite list module into your app module
```js
import InfiniteList from 'vue3-infinite-list';
```
### Wrap Infinite list tag around list items
```html
{{ index + 1 }} : {{ item }}
```
The default direction is `vertical`
### Basic Usage: Fixed Height, Scroll Vertical(default)
```html
{{ index + 1 }} : {{ item }}
```
The default direction is `vertical`
### Scroll Direction: Horizontal
```html
item{{ index }}
xxxxxxx
xxxxxxx
Primary
```
### Dynamic Height
```html
item {{ index }} : {{ item }}
```
where `getItemSize` is a function with it's signature as : `(i: number): number`, with this you can dynamic set your item height.
### Scroll to Index
```html
item{{ index + 1 }} : {{ item }}
```
you can also use prop `scrollToIndex` to scroll to special index。
### Scroll to Index （More fine-grained with Alignment）
```html
item{{ index + 1 }} : {{ item }}
```
you can also use prop `scrollToIndex` with `scrollToAlignment` to special how the item align to the container, which has four value: `auto`, `start`, `center`, `end`。
### Scroll to Offset
```html
index: {{ index + 1 }}
xxxxxxxxxx
Primary Success
```
you can also use prop `scrollOffset` to scroll to special offset。
### Dynamic Data is also Support
```html
item{{ index + 1 }}
2022-05-01
Name: Tom
Button
Button
```
just change the bind `data` dynamic.
### Set overscanCount
```html
item{{ index + 1 }}
2022-05-01
Name: Tom
Button
Button
```
Number of extra buffer items to render above/below the visible items. Tweaking this can help reduce scroll flickering on certain browsers/devices.
### Prop Types
| Property | Type | Required? | Description |
| :---------------- | :----------------- | :-------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| width | Number or String\* | ✓ | Width of List. This property will determine the number of rendered items when scrollDirection is `'horizontal'`. |
| height | Number or String\* | ✓ | Height of List. This property will determine the number of rendered items when scrollDirection is `'vertical'`. |
| data | any[] | ✓ | The data that builds the templates within the Infinite scroll. |
| itemSize | `(index: number): number` | | Either a fixed height/width (depending on the scrollDirection), 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` |
| scrollDirection | String | | Whether the list should scroll vertically or horizontally. One of `'vertical'` (default) or `'horizontal'`. |
| scrollOffset | 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. |
_\* Width may only be a string when `scrollDirection` is `'vertical'`. Similarly, Height may only be a string if `scrollDirection` is `'horizontal'`_
## Reporting Issues
Found an issue? Please [report it](https://github.com/tnfe/vue3-infinite-list/issues) along with any relevant details to reproduce it.
## Acknowledgments
This library is transplanted from [react-tiny-virtual-list](https://github.com/clauderic/react-tiny-virtual-list) and [react-virtualized](https://github.com/bvaughn/react-virtualized/).
Thanks for the great works of author [Claudéric Demers](https://twitter.com/clauderic_d) ❤️
## License
is available under the MIT License.