虚拟滚动搭配上拉下滑加载的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 | 必传 |
| 属性 | 说明 |
|---|---|
| pulldown_loading | 下拉加载 loading 的 logo |
| pulldown_success | 下拉加载 成功 的 logo |
| pullup_loading | 上滑加载 loading 的 logo |
| pullup_success | 上滑加载 成功 的 logo |