虚拟滚动搭配上拉下滑加载的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 |
必传 |
| 属性 | 说明 |
|---|---|
| pulldown_loading | 下拉加载 loading 的 logo |
| pulldown_success | 下拉加载 成功 的 logo |
| pullup_loading | 上滑加载 loading 的 logo |
| pullup_success | 上滑加载 成功 的 logo |
版权声明：
1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。2、网站不提供资料下载，如需下载请到原作者页面进行下载。
