uni-app 下拉加载 u-view_uni下拉加载

此组件一般用于标识页面底部加载数据时的状态，共有三种状态：

• 加载前，显示"加载更多"，加入点击可选，是因为数据不够一页时，无法触发页面的onReachBottom生命周期
• 加载中，显示"正在加载..."，2种动画可选
• 加载后，如果还有数据，回到"加载前"状态，否则加载结束，显示"没有更多了"

<u-loadmore :status="status" />
 
data:
 
list: [],
status: "loadmore",
pages: "1",
limit: {
 pageNum: 1,
 pageSize: 10,
},
 
onShow() {
    this.init();
  },
  onLoad() {},
  async onReachBottom() {
    console.log("onReachBottom");
    if (this.limit.pageNum >= this.pages) {
      this.status = "nomore";
      return;
    }
    this.status = "loading";
    this.limit.pageNum = ++this.limit.pageNum;
    await this.init();
  },
 
methods:
 
init() {
      const q = {
        ...this.limit,
      };
      queryAppointList(q).then(
        (res) => {
          if (res && res.data) {
            this.pages = res.data.pages;
            this.list = this.list.concat(res.data.records);
            if (this.limit.pageNum >= this.pages) this.status = "nomore";
            else this.status = "loading";
            console.log(this.status, "状态");
          }
        },
        () => {}
      );
    },