Listpage 数据列表

Feature

1. 满足常用「数据列表分页」的业务场景
2. 支持分页
3. 支持多个数据列表
4. 自动捕捉下拉重载：onPullDownRefresh
5. 自动捕捉上拉加载：onReachBottom
6. 自带请求锁，防止帕金森氏手抖用户
7. 简单优雅的 API

安装

yarn add '@retailwe/common-libs-listpage' --save-exact

快速使用

Step1 - 配置初始化

import { listPageDecorator } from '@retailwe/common-libs-listpage';

@wxPage()
@listPageDecorator({
  // 自动下拉刷新（要自行在 json 文件配置：enablePullDownRefresh）
  enabledPullDownRefresh: true,

  // 自动触底翻页
  enabledReachBottom: true,

  // 是否自动加载第一页
  autoLoadFirstPage: true,

  // 会把列表数据注入到 this.data.listPage = {
  //   loadingMore: boolean,
  //   activeListName: 'works', // 默认第一个
  //   works: {
  //       totalPage: number,
  //       data: [...], // fetchPageData 返回来的数据
  //       hasMore: boolean,
  //       currentPage: number,
  //   },
  //   goods: {...}, // 同 works
  // }
  dataDomain: 'listPage',

  // 列表数据配置
  lists: [
    // 我的作品
    {
      name: 'works',
      pageSize: 20,
      fetchPageData({ theHost, pageNo, pageSize }) {
         return xxxAPI({
           pageNo,
           pageSize,
           keywords,
         }).then(data => {
           const { list, totalCount } = data;
           theHost.setData({ totalCount });

           // 更新 totalPage
           this.setTotalPage(Math.ceil( totalCount / pageSize ));
           return list;
         });
       },
    },

    // 商品
    {
      name: 'goods',
      pageSize: 20,
      fetchPageData({ theHost, pageNo, pageSize }) {...},
    },
  ],
})
export default class extends BasePage {...}

Step2 - 渲染列表

<view class="content">
  <wr-videos videos="{{ listPage.works.data }}"></wr-videos>
  <wr-goods goods="{{ listPage.goods.data }}" />
</view>

Active List

在多列表下，当触发 onPullDownRefresh 和 onReachBottom ，就会面临到底加载哪一个列表的问题。 这种场景多数见于一个页面，有多个 tab 切换，每个 tab 对应了可以分页的数据。

listPage 当然对种问题的有优雅的解决方案的。

于是「Active List」 的概念被引入了，它的默认值是 options.lists 中数组第一个列表。

我们可以通过 listPage.setActiveList(name) 来改变当前 Active List：

首先假设我们定义了以下这个页面：

onTabChange(e) {
   // 当前的 tab name
   const { name } = e.detail;
   await this.listPage.setActiveList(name);
   this.loadFirstPage();
}

获取 MultiList 和 List 实例

MultiList 和 List API，请查看对应文档。

onLoad() {
  const listPage: MultiList = this.listPage;
  const list: List = listPage.getList('works');
}

单元测试覆盖率

单元测试覆盖率