README
react-loadMore
基于react的上拉加载和下拉刷新组件
注意
ListView 为无状态组件。意味着ListView只为你提供两个功能:
- 当在顶部时,继续下拉到一定的距离(默认50)将会调用刷新回调。
- 上滑到底部时,将会调用加载更多的回调。
- 组件是否正在刷新、正在加载更多、由外部状态控制,组件本身不维护。 所以当刷新时,应该设置外部state中正在刷新为true,反之为false,以确保LiveView组件会重新render。 加载更多逻辑与下拉刷新一样
用法
- ListView 默认设置width:100%; height:100%;设置宽高可通过style和class
- 传入refreshProps属性,开启下拉刷新功能
- 传入loadMoreProps属性,开启加载更多功能
例子
<ListView
// 设置组件宽高
style={{
width: '100%',
height: '100%'
}}
// 列表数据
data={data}
// 列表组件, 接受data参数
component:element
// 下拉刷新属性(object)
refreshProps={{
// 正在刷新 **(应该为外部组件的state,确保ListView根据它进行组件刷新)**
active: true | false,
// 自定义刷新提示组件,接受两个参数active(当前是否正在刷新)和 will(松开手指则触发刷新)
// 默认active为false时、显示下拉刷新
// active为true时,显示正在刷新
// active为false且will为true时,显示松开刷新
component: element
// 触发下拉刷新时执行的回调函数
callback: function
}}
// 加载更多属性 (object)
loadMoreProps={{
// 当前页码
page: int,
// 每页数量
reow: int (defalt: 10),
// 正在加载 **(应该为外部组件的state,确保ListView根据它进行组件刷新)**
active: true | false,
// 自定义刷新提示组件,接受两个参数active(当前是否正在加载)和 end(没有更多)
// 默认active为true时,显示正在加载
// active为false且end为true时,显示没有更多了
component: element,
// 触发加载更多时执行的回调函数
callback: this.onLoaderMore.bind(this)
}}
/>