react-listview-componentdeprecated

pull down to refresh or slide up to load more

Usage no npm install needed!

<script type="module">
  import reactListviewComponent from 'https://cdn.skypack.dev/react-listview-component';
</script>

README

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)
        }}
     />