react-virtualized-scroll
react-virtualized-scroll copied to clipboard
Published
20 hours ago •
DavidWong9785
DavidWong9785
虚拟滚动搭配上拉下滑加载的scroll组件
react-virtualized-scroll
虚拟滚动搭配上拉下滑加载的scroll组件
简介
- 搭配
typescript和react-hooks编写的虚拟滚动组件 - 基于
react-virtualized进行再封装。 - 暴露了
react-virtualized的 ref，可调用react-virtualized的方法 - 除了渲染列表，你还可以传入其他的子组件（如悬浮球~等），只需要把定位设为 fixed
安装导入
cnpm i react-virtualized react-virtualized-scroll --save
import ReactVirtualizedScroll from 'react-virtualized-scroll'
使用
<ReactVirtualizedScroll
onPullDown={handlePullDown}
onPullUp={handlePullUp}
hasMore={hasMore}
data={data}
row={Row}
height={"100vh"}
width={"100vw"}
onScroll={onScroll}
info={info}
logo={logo}>
<div style="position: fixed;top: 50%">fixed element</div>
</ReactVirtualizedScroll>
属性
| 名称 | 类型 | 说明 | |
| width、height | string | 列表宽高，带单位 |
可选 默认100vw/vh |
| hasMore | boolean | 判断是否还可以下滑加载 | 必传，默认true |
| data | array | 用于渲染列表的目标数 | 必传，默认 [] |
| info | object | 需要传入 row 渲染函数作为参数的数据 | 可选 |
| logo | object | 加载时展示的 loading 图案，四个属性 |
可选 有默认logo |
| onPullDown | function |
下拉加载回调
该方法必须返回一个
可以使用
当 |
可选 |
| onPullUp | function |
上滑加载回调，目的同上，该方法需要返回一个 promise 对象
|
可选 |
| onScroll | function |
滑动回调 参数1: clientHeight 参数2: scrollTop 参数3: scrollHeight |
可选 |
| row | function |
列表每一行的渲染函数 参数1：类型为object，属性包含该行索引 index 和自定义传入的 info 属性 参数2：用于渲染列表的目标数组data |
必传 |
logo属性（字符串，图片等等，只要是JSX.Element即可）
| 属性 | 说明 |
|---|---|
| pulldown_loading | 下拉加载 loading 的 logo |
| pulldown_success | 下拉加载 成功 的 logo |
| pullup_loading | 上滑加载 loading 的 logo |
| pullup_success | 上滑加载 成功 的 logo |
DavidWong9785