react-listview-component v1.0.0

react-loadMore

基于react的上拉加载和下拉刷新组件

注意

ListView 为无状态组件。意味着ListView只为你提供两个功能： 1. 当在顶部时，继续下拉到一定的距离（默认50）将会调用刷新回调。 2. 上滑到底部时，将会调用加载更多的回调。 3. 组件是否正在刷新、正在加载更多、由外部状态控制，组件本身不维护。 所以当刷新时，应该设置外部state中正在刷新为true，反之为false，以确保LiveView组件会重新render。 加载更多逻辑与下拉刷新一样

用法

1. ListView 默认设置width:100%; height:100%;设置宽高可通过style和class
2. 传入refreshProps属性，开启下拉刷新功能
3. 传入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)
        }}
     />