uniapp下拉加載

1 如果后端接口沒有做分頁處理，就會一次性獲取到所有數據，那么頁面初次渲染的速度就會很慢。可以在數據渲染的時候做上拉加載的處理，也是有效果的。

  data() {
    return {
      junhongzixunList: [],
      isFirstList: [],
      e: 1,
    };
  }

  onShow() {
    uni.showLoading({
      title: "加載中",
    });
    this.queryGetList();//頁面顯示時獲取所有數據
  },

2 queryGetList 獲取數據方法

    async queryGetList() {
      let that = this;
      let res = await indexAPI.getJHRoom(//獲取所有數據
        that.gUserInfo.unionId,
        that.gUserInfo.nickName,
        that.branchNo,
        that.TabCur == 0 ? 1 : 0,
        that.companyId
      );
      if (res.success) {
        that.isFirstList = res.data.slice(
          that.e * 5 - 5,
          that.e * 5
        );
        that.junhongzixunList = that.junhongzixunList.concat(that.isFirstList);
//關閉loading
        that.$nextTick(() => {
          uni.hideLoading();
        });
      }
    },

3  上拉加載觸底

  onReachBottom: function () {
    // 上拉加載更多
    if ((this.e - 1) * 5 < this.junhongzixunList.length) {
      //判斷上拉條數是否大於總頁數junhongzixunList.length
      this.e++;
      this.queryJunhongzixunList();
    }
  },