PageList

移动端分页加载 & 下拉刷新列表 react 组件

npm

npm install -S rmc-pagelist

特点

列表分页加载，下拉刷新，易于使用

Demo

建议查看 Demo 源码来理解组件：view source

注意

使用时需要用样式约束组件的高度。

<PageList style={{ height: 200 }}>
</PageList>

或者 使用 height 属性来约束组件的高度

<PageList height={() => document.documentElement.clientHeight / 2}>
</PageList>

建议使用绝对布局定位来约束高度：

<PageList className="list">
</PageList>

.list {
  position: fixed;
  top: 40px; // 列表上方留空
  bottom: 88px; // 列表下方留空
  left: 0;
  right: 0;
}

属性

• height: 必须传。定义一个高度给列表作为滚动区域
• loadPage：必须传。分页加载数据的Promise，方法需返回一个Promise<{ hasMore, list }>
• pullRefreshLoad：可选。下拉刷新列表的Promise，方法需返回一个Promise<{ hasMore, list }>。不传则关闭列表的下拉刷新功能
• listReloadKey：可选。这个属性值变化后，会让列表重置，重新从第一页开始加载。使用场景：列表的筛选条件发生变化后，改变这个值传入
• renderPageLoading：可选。整页加载样式，默认仅在第一页加载时展示
• renderPageError：可选。整页错误样式，默认仅在第一页出错时展示
• renderPageEmpty：可选。整页空数据样式
• renderListNormalFoot：可选。列表底部的默认样式
• renderListLoadingFoot：可选。列表底部的加载中样式
• renderListNoMoreFoot：可选。列表底部的无更多数据样式
• renderListErrorFoot：可选。列表底部错误样式
• renderListNormalHead：可选。下拉刷新的列表顶部默认样式
• renderListReadyHead：可选。下拉刷新的列表顶部，下拉足够距离后，松开可以刷新列表的样式
• renderListRefreshingHead：可选。下拉刷新的列表顶部刷新中的样式
• defaultPageNo：可选。初始默认页码
• defaultHasMore：可选。初始是否有下一页数据

AntmPageList

如果在口碑掌柜里，请使用 AntmPageList 以符合口碑掌柜视觉规范 (只要引用了antmV1都建议用)

import AntmPageList from 'rmc-pagelist/AntmPageList';

引用了antmV2 的请使用 Antm2PageList

组件行为详细说明

loadPage 属性需要返回一个 Promise 对象，Promise 的不同行为会导致不同的展示。

情景1

加载结束，并告诉组件还有下一页，组件会在滑到底部的时候触发 loadPage，底部展示 renderListLoadingFoot

loadPage(pageNo) {
    return new Promise((resolve, reject) => {
        ...
        resolve({
         hasMore: true,
         list, // list 传入本次加载出来的列表条目
        });
    });
}

情景2

加载结束，并告诉组件没有下一页了，组件滑到底部不会触发加载下一页，底部展示无更多样式 renderListNoMoreFoot

loadPage(pageNo) {
    return new Promise((resolve, reject) => {
        ...
        resolve({
         hasMore: false,
         list, // list 传入本次加载出来的列表条目
        });
    });
}

情景3

加载失败。展示 renderPageError || renderListErrorFoot，同时会露出重试按钮，用户点击会重新触发 loadPage

loadPage(pageNo) {
    return new Promise((resolve, reject) => {
        ...
        reject(new Error('错误文案'));
    });
}

情景4

首屏加载到空数据。展示 renderPageError 空数据样式（仅在第一页展示）

loadPage(pageNo) {
    return new Promise((resolve, reject) => {
        ...
        resolve({
         hasMore: false,
         list: [], // 本次加载出来的列表条目为空
        });
    });
}

建议查看 Demo 源码来理解组件：view source