/react-virtualized-scroll

虚拟滚动搭配上拉下滑加载的scroll组件

Primary LanguageJavaScriptMIT LicenseMIT

react-virtualized-scroll

虚拟滚动搭配上拉下滑加载的scroll组件

github issues forks stars

npm downloads npm bundle size license github last commit

avatar

简介

  • 搭配 typescriptreact-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