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