react-window-pull-refresh

该组件为移动端列表展示组件，基于react-window.并添加了下拉刷新和分页加载功能。

效果见Demo

安装

npm install react-window-pull-refresh --save

ReactWindowPullRefresh

使用

import List from 'react-window-pull-refresh'

必传参数

名称	类型	说明
isNextPageLoading	bool	是否正在远程获取下一页数据
items	array	需要展示的数据的列表数组
itemRender	function	每项渲染函数的回调function(item,index,style)
loadNextPage	function	加载下一页的函数回调(startIndex: number, stopIndex: number) => Promise<void>,必须返回Promise对象
itemHeight	number 或者 function	每项的显示高度,function是用于每项高度不固定的情况

可选参数

名称	类型	说明
total	number	显示数据的总长度,默认9999
width	number	列表展示的宽度
height	number	列表容器的高度,如果不传，组件会填充父元素，建议父元素使用flex布局
initialScrollOffset	number	列表初始展示的滚动位置，可以配合onScroll做到返回该页面，记录上次滚动的位置
onScroll	function	滚动的回调function({scrollDirection,scrollOffset,scrollUpdateWasRequested})
handlePullRefresh	function	下拉刷新的事件回调,如果不传就没有下拉刷新功能function()
emptyNode	React Node(React组件)	获取的数据为空时，展示的组件
loadingNode	React Node(React组件)	列表拉到下面切正在加载时，展示的组件
listOtherProps	object	react-window组件的其他参数，参见,只支持FixedSizeList和VariableSizeList

PullToRefresh

这个组件可以使其他组件具有下拉刷新的功能

使用

import {PullToRefresh} from 'react-window-pull-refresh'
 
function Demo ({handlePullRefresh}){
  return <PullToRefresh  handleRefresh={handlePullRefresh}>
                <div>内容区域<div/>
            </PullToRefresh>
}

具体使用方法

更多具体使用方法请参考Demo

注意事项

为了能够正确的计算滚动的高度，请在itemRender函数中将style设置到节点上，代码如下

 itemRender=(item,index,style)=>{
    const myStyle={
      ...style,
      backgroundColor:index%2?'#ffffff':'#e2e2e2',
      display:'flex',
      justifyContent:'center',
      alignItems:'center'
    }
    return (
      <div style={myStyle}>
        {index}: {item}
      </div>
    )
  }