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	下拉加载回调 该方法必须返回一个 promise 对象 ( 用于控制下拉 loading 状态 ) 可以使用 async 方法或者直接返回 promise 对象 当 promise 状态完成之后 ( resolve/reject )，下拉加载状态结束	可选
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