@retailwe/ui-load-more NPM

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