1.0.9 • Published 4 years ago

react-window-pull-refresh v1.0.9

Weekly downloads
17
License
MIT
Repository
-
Last release
4 years ago

react-window-pull-refresh

npm package

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

效果见Demo

安装

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

ReactWindowPullRefresh

使用

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

必传参数

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

可选参数

名称类型说明
totalnumber显示数据的总长度,默认9999
widthnumber列表展示的宽度
heightnumber列表容器的高度,如果不传,组件会填充父元素,建议父元素使用flex布局
initialScrollOffsetnumber列表初始展示的滚动位置,可以配合onScroll做到返回该页面,记录上次滚动的位置
onScrollfunction滚动的回调function({scrollDirection,scrollOffset,scrollUpdateWasRequested})
handlePullRefreshfunction下拉刷新的事件回调,如果不传就没有下拉刷新功能function()
emptyNodeReact Node(React组件)获取的数据为空时,展示的组件
loadingNodeReact Node(React组件)列表拉到下面切正在加载时,展示的组件
listOtherPropsobjectreact-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>
    )
  }
1.0.9

4 years ago

1.0.8

4 years ago

1.0.7

4 years ago

1.0.6

4 years ago

1.0.5

4 years ago

1.0.4

4 years ago

1.0.3

4 years ago

1.0.2

4 years ago

1.0.1

4 years ago

1.0.0

5 years ago

0.0.3

5 years ago

0.0.2

5 years ago

0.0.1

5 years ago