https://github.com/zhangyu1818/react-tiny-virtual-grid

react tiny virtual grid
https://github.com/zhangyu1818/react-tiny-virtual-grid

Last synced: 23 days ago
JSON representation

react tiny virtual grid

• Host: GitHub
• URL: https://github.com/zhangyu1818/react-tiny-virtual-grid
• Owner: zhangyu1818
• Created: 2020-03-29T03:11:42.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2020-03-30T13:36:46.000Z (over 4 years ago)
• Last Synced: 2024-04-24T07:23:40.919Z (8 months ago)
• Language: TypeScript
• Size: 315 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# react-tiny-virtual-grid

虚拟列表 + 类似Grid布局

根据传入不同列数，调整元素位置

在此基础上可以做到当列数动态改变后，给元素的布局添加动画

![](https://tva1.sinaimg.cn/large/00831rSTgy1gdb0z24fdyg30dc073qi9.gif)

## Installation

```

    npm install react-tiny-virtual-grid

```

## Usage

```jsx

  

    {(item, [x, y], stop, index) => (

      


        {item}

      

    )}

  

```

## Props


| 属性     | 说明         | 类型                                                                                                                 | 默认值 |

| ---------- | -------------- | ---------------------------------------------------------------------------------------------------------------------- | ------ |

| dataSource | 渲染的数据 | any[]                                                                                                                  | -      |

| itemHeight | 每行元素的高度 | number                                                                                                                 | -      |

| bufferSize | 下方缓冲行数 | number                                                                                                                 | 0      |

| columns    | 列数         | number                                                                                                                 | -      |

| children   | 渲染的函数 |  (item: T,pos: [number, number],stop: boolean,index: number) => React.ReactElement | -      |

**注意**

如果要实现动画效果，需要使用Render Props的参数index作为key

目前还没有想到好的方法来实现行数增加时也能进行动画效果。如果行数为1，这时候假如显示了4个元素，将行数变为2，元素从4个变为了8个，凭空新增的元素，没法做到动画。现在解决的想法是需要渲染一个固定长度的数组，这样需要传入一个最大行数，没想到好办法

## TODO

- [ ] 完整缓冲区，防止闪屏

- [ ] 行数增加时也添加动画

- [ ] 动态元素高度