https://github.com/junqiuzhang/vue-virtualized
vue virtualized render
https://github.com/junqiuzhang/vue-virtualized
list virtual virtualized vue vue3 vuejs
Last synced: 11 months ago
JSON representation
vue virtualized render
- Host: GitHub
- URL: https://github.com/junqiuzhang/vue-virtualized
- Owner: junqiuzhang
- License: mit
- Created: 2021-06-08T09:07:59.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2022-05-13T14:15:06.000Z (about 4 years ago)
- Last Synced: 2024-12-30T23:13:08.086Z (over 1 year ago)
- Topics: list, virtual, virtualized, vue, vue3, vuejs
- Language: TypeScript
- Homepage:
- Size: 181 KB
- Stars: 2
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-virtualized
[中文文档](https://github.com/junqiuzhang/vue-virtualized/blob/master/README_zh-CN.md)
vue-virtualized is a virtual rendering library, it can help you achieve virtual rendering of long lists, thereby improving the performance of list rendering.
## Feature
1. vue-virtualized is lightweight, only 100 lines of code, 2 KB in size.
2. vue-virtualized has very good performance, no matter how long the list is, it can be easy 60 fps.
3. vue-virtualized is written using vue3 composition api, and full support for typescript.
## Install
```
# Yarn
yarn add vue-virtualized
# NPM
npm install --save vue-virtualized
```
## Usage
See example for usage, there are some announcements:
1. vue-virtualized only support vue3, using jsx grammar.
2. vue-virtualized only support one-dimension list, not support two-dimension table.
3. vue-virtualized use renderItem function to render list items.
4. vue-virtualized use reRenderCount to determine if list updates are needed.
5. vue-virtualized use preRenderPageCount to control the number of pre-rendered pages.
### Example
```tsx
import List from "vue-virtualized";
{
// used to get the height of a list item, numbers or functions can be passed
return 100;
}}
reRenderCount={1} // if your change list item‘s height, you must change this value
preRenderPageCount={1} // number of pre-rendered pages, the larger the number, the more list items will be pre-rendered
renderItem={({ index, style }) => {
// used to render list items
const data = props.dataSource[index];
return
{data};
}}
/>;
```
### Interface
```ts
interface IProps {
width: number;
height: number;
itemCount: number;
itemSize: (index: number) => number;
renderItem: (params: { index: number; style: CSSProperties }) => JSX.Element;
reRenderCount?: number;
preRenderPageCount?: number;
}
```
## License
MIT