小程序分页组件

1、UI 组件：paging-bar 2、逻辑组件：Panging

注意

1、小程序专用 因为标记了"miniprogram": "dist"，只能从入口 js 引入，不支持from '@tcfs/mp-paging/dist/***

分页类 Paging

适用于零售标准接口协议的分页逻辑封装

实例化

import { Paging } from '@tcfs/mp-paging';
const paging = new Paging({
  pageSize: 10,
  // 数据获取方法
  fetchMethod: apis.goods.list,
  // 数据集在响应包data里的属性
  listAttr: 'dataList',
});

实例属性

  /**
   * 每页大小
   */
  pageSize?: number;
  /**
   * 当前页码
   */
  pageNum?: number;
  /**
   * 记录总数
   * 某些场景（比如游标），可能没有totalCount，此时组件会检查list的记录数
   */
  totalCount?: number;
  /**
   * 数据集名称，默认list
   * listAttr为string，从响应对象中JSON对象的data部分获取。例如: data[listAttr]
   * listAttr为函数，则需要返回数据集合。例如: res=>{ return res.data.xxxx }
   */
  listAttr?: string | any;
  /**
   * 记录总数名称，默认totalCount
   * 会从响应对象中JSON对象的data部分获取。例如: data[totalCountAttr]
   */
  totalCountAttr?: string;
  /**
   * fly请求函数
   * 下面情况可以在这里自己处理
   * 1、pageSize，pageNum参数不一样；
   * 2、使用offset风格；
   * 3、类似微博的feeds流
   */
  fetchMethod?: APIMethod;
  /**
   * 列表项格式化函数
   * 每当获取新的一页数据，都会遍历新的数据，执行该格式化函数
   */
  itemFormat?(item);

实例方法

  // 可覆盖，用于监听数据集变化
  onChangeList(list): any {}
  // 可覆盖，用于监听状态变化
  onChangeStatus(status): any {}
  // 重载数据，使用全新参数，从第一页加载
  reload(params?): Promise<void> {}
  // 加载失败时，可重试请求数据，复用上一次的参数缓存
  retry(): Promise<void> {}
  // 加载下一页，复用上一次的参数缓存
  next(params?): Promise<void> {}

范例

import { BasePage, wxPage } from '@tcfs/mp';
import { Paging, PAGING_STATUS } from '@tcfs/mp-paging';
import { pages, apis } from '@/config/index';
@wxPage()
export default class extends BasePage {
  data: any = {
    pagingList: [],
    pagingStatus: PAGING_STATUS.INIT,
    PAGING_STATUS,
  };
  // 实例属性声明
  paging = null as unknown as Paging;

  onLoad(): void {
    // 初始化实例
    this.paging = new Paging({
      pageSize: 10,
      // 数据获取方法
      fetchMethod: apis.goods.list,
      // 数据集在响应包data里的属性
      listAttr: 'dataList',
    });
    this.paging.onChangeList = (list) => {
      this.setData({
        pagingList: list,
      });
    };

    this.paging.onChangeStatus = (status) => {
      this.setData({
        pagingStatus: status,
      });
    };
    this.init();
  }

  onReachBottom(): void {
    this.paging.next().catch(console.log);
  }

  init(): void {
    this.reload();
  }

  reload(): any {
    const params = {};
    this.paging.reload(params);
  }

  retry(): void {
    this.paging.retry();
  }
}

分页状态条 paging-bar

{
  "usingComponents": {
    "sr-paging-bar": "@tcfs/mp-paging/paging-bar/index"
  }
}

<sr-paging-bar status="{{pagingStatus}}" listLength="{{pagingList.length}}" bind:retry="retry" />

props

1. visible 是否可见，默认 true
2. status 分页状态，参见PAGING_STATUS
3. customText 自定义文案，默认 {}
4. hasRetry 请求异常时，是否使用重试 默认 true
5. listLength 当前列表的长度
6. minShowFinish 列表长度最少达到多少记录数时，才显示 finish 状态，一般设置可显示一屏的条数。默认 1

自定义文案

// 默认文案如下，可以使用customText来覆盖
{
  [PAGING_STATUS.LOADING]: '请求中，请稍后...',
  [PAGING_STATUS.ERROR]: '请求异常，',
  [PAGING_STATUS.EMPTY]: '暂无内容',
  [PAGING_STATUS.FINISH]: '没有更多了~',
  [PAGING_STATUS.NEXT]: '下一页',
  retry: '重试',
};

// 全局覆盖默认文案
import { globalConfig, PAGING_STATUS } from '@tcfs/mp-paging';
Object.assgin(globalConfig.pagingBarDefaultText, {
  [PAGING_STATUS.LOADING]: '快好了，别急...',
});

样式覆盖

页面可以覆盖组件的样式类如下

.srmp-paging-bar {
  /* 容器样式 */
}

.srmp-paging-bar-xxx {
  /* 容器样式-分页状态 xxx部分参见PAGING_STATUS */
}

.srmp-paging-bar-retry {
  /* 重试样式 */
}

Paging 与 UI 分离，若 paging-bar 不满足需求，可复用 PAGING_STATUS 自己编写 UI

分页状态常量 PAGING_STATUS

// 引用
import { PAGING_STATUS } from '@tcfs/mp-paging';
// 内容
{
  /**
   * 初始化，默认状态
   */
  INIT: 'init',
  /**
   * 分页数据加载中
   */
  LOADING: 'loading',
  /**
   * 分页数据为空，即没有任何数据
   */
  EMPTY: 'empty',
  /**
   * 分页数据加载失败
   */
  ERROR: 'error',
  /**
   * 分页数据存在，且可以请求下一页
   */
  NEXT: 'next',
  /**
   * 分页数据全部加载完成，即没有下一页了
   */
  FINISH: 'finish',
};