load-more 加载更多

引入

全局引入，在miniprogram根目录下的app.json中配置，局部引入，在需要引入的页面或组件的index.json中配置。

// app.json 或 index.json
"usingComponents": {
  "wr-load-more": "@retailwe/ui-load-more/index"
}

代码演示

基础用法

<view style="padding: 20rpx;">item列表👇</view>
<view style="padding: 0 40rpx;">
  <view style="padding: 30rpx; margin-top: 20rpx; background-color: white;"
    wx:for="{{list}}" wx:key="index"
  >{{item}}</view>
  <wr-load-more
    list-is-empty="{{!list.length}}"
    status="{{dataLoading}}"
    bindretry="onReTry">
  </wr-load-more>
</view>

Page({
  page: {
    num: 1,
    size: 10,
  },

  data: {
    dataLoading: 0,
    list: [] as string[],
  },

  onLoad() {
    this.init();
  },

  onReachBottom() {
    this.loadMore();
  },

  onReTry() {
    this.data.dataLoading = 0;
    this.loadMore();
  },

  init() {
    this.page = {
      num: 1,
      size: 10,
    };
    this.data.list = [];
    return this.loadMore();
  },

  loadMore() {
    if (this.data.dataLoading !== 0) {
      return;
    }
    this.setData({ dataLoading: 1 });
    return this.getData({
      pageNum: this.page.num,
      pageSize: this.page.size,
    })
      .then(res => {
        this.page.num++;
        const { data, pageCount } = res;
        this.setData({
          list: this.data.list.concat(data),
          dataLoading: this.page.num < pageCount ? 0 : 2,
        });
      })
      .catch(err => {
        this.setData({ dataLoading: 3 });
        Promise.reject(err);
      });
  },

  failed: false,
  getData({
    pageNum,
    pageSize,
  }): Promise<{ pageCount: number; data: string[] }> {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        if (pageNum === 2 && !this.failed) {
          // 故意制造一次失败
          this.failed = true;
          return reject();
        }
        let data: string[] = [];
        if (pageNum <= 3) {
          data = Array.from(
            new Array(pageSize),
            (_v, i) => 'item ' + ((pageNum - 1) * pageSize + i + 1),
          );
        }
        resolve({
          data,
          pageCount: data.length,
        });
      }, 1000);
    });
  },
});

自定义文案、颜色

<view style="padding: 0 40rpx;">
  <view style="padding: 30rpx; margin-top: 20rpx; background-color: white;"
    wx:for="{{list}}" wx:key="index"
  >{{item}}</view>
  <wr-load-more
    list-is-empty="{{!list.length}}"
    status="{{dataLoading}}"
    color="red"
    loading-text="还在加载, 请等待..."
    no-more-text="我是有底线的"
    bindretry="onReTry">
  ></wr-load-more>
</view>

通过slot传入列表/页面空态，让load-more来控制空态的显示/隐藏

<!-- 列表部分 -->
<view style="padding: 30rpx; margin-top: 20rpx; background-color: white;"
  wx:for="{{list}}" wx:key="index"
>{{item}}</view>
<!-- 加载 -->
<wr-load-more
  list-is-empty="{{!serviceListRaw.length}}"
  status="{{listLoading}}"
  bindretry="onReTryLoad">
  <!-- 空态 -->
  <view class="empty-wrapper" slot="empty">
    <wr-empty
      wr-class="empty"
      size="240rpx"
      textColor="#999999"
      textSize="28rpx"
      src="{{emptyImg}}"
    >暂无退款或售后申请记录</wr-empty>
  </view>  
</wr-load-more>

API

loading-content Props

| 参数 | 说明 | 类型 | 默认值 | 版本 | |-----------|-----------|-----------|-------------|-------------| | status | 状态，0-占位无内容，1-正在加载，2-已全部加载，3-加载失败 | number | 0 | - | | loadingText | 1-正在加载的文案 | string | 加载中... | - | | noMoreText | 2-已全部加载的文案 | string | 没有更多了 | - | | failedText | 3-加载失败的文案 | string | 加载失败，点击重试 | - | | color | 颜色，包括字体、线条、loading | string | #BBBBBB | - | | failedColor | 2-加载失败的字体颜色 | string | #FA550F | - | | size | loading效果size | string | 40rpx | - | | loadingBackgroundColor | loading效果的背景色，请务必配置 | string | #F5F5F5 | - | | listIsEmpty | 列表是否为空，组件会根据该值自动决定是否需要占位 | boolean | false | - |

注意 listIsEmpty为false并且status为0的时候仍会占位，防止拖到列表底部loading看不到或只看到一半。

slot

| 名称 | 说明 | |-----------|-----------| | empty | 传入空态要渲染的内容 |

外部样式类

| 类名 | 说明 | |-----------|-----------| | wr-class | 根节点样式类 | | wr-class--no-more | noMore的样式类 |