npm package: @retailwe/ui-load-more
Description: ## 引入
Latest version: 0.0.17

# load-more 加载更多

## 引入

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

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

## 代码演示

### 基础用法

```html
<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>
```

```ts
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);
    });
  },
});
```

### 自定义文案、颜色

```html
<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来控制空态的显示/隐藏

```html
<!-- 列表部分 -->
<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的样式类 |