Elementui-plus 实现滚动到底部分页刷新

1.在这里面用了卡片来实现el-card滚动加载

    <div style="height: calc(100% - 280px);" class="el-main" v-loading="loading"
         element-loading-background="rgba(0, 0, 0, 0.3)" element-loading-text="Loading..." @scroll="handleScroll">
      <el-card class="box-card card-margin" v-for="item in itemList" :key="item.uavId"
               @click="chooseAirline(item)"
               :class="{'origin-card-active': selectSign == true && item.id == this.form.airlineId}">
}

 直接抓住重点，通过@scroll="handleScroll"来实现滚动分页加载数据。

2.

    handleScroll(event) {
      const {target} = event;
      const threshold = 200; // 距离底部100px时开始加载
      if (!this.loading && !this.pageTotal && target.scrollHeight - target.scrollTop <= target.clientHeight + threshold) {
        setTimeout(() => {
          this.loadMoreData();
        }, 500); // 设置1秒的延迟
      }
    },

你可以随机自定义在距离底部多久去加载数据。

3.

    loadMoreData() {
      if (this.loading) return;
      this.loading = true;
      this.queryParams.pageNum += 1; // 只有在成功加载了完整页数据后才递增页码

      let fromData = {
        pageSize: this.queryParams.pageSize,
        pageNum: this.queryParams.pageNum,
        airlineName: this.queryParams.taskName,
        startTime: this.queryParams.taskTime && this.queryParams.taskTime.length > 0 ? this.queryParams.taskTime[0] : '',
        endTime: this.queryParams.taskTime && this.queryParams.taskTime.length > 1 ? this.queryParams.taskTime[1] : '',
        uavName: this.queryParams.uavName,
        airlineTypes: this.queryParams.airlineType.join(',')
      };

      getLineList_c(fromData).then(res => {
        if (res.code === 200) {
          console.log("分页查询后的回调为", res)
          this.itemList = [...this.itemList, ...res.rows];
          console.log("this.itemList数组为", this.itemList)
          if (this.itemList.length == res.total) {
            this.pageTotal = true;
          }
        }
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    },

将每一行多添加的代码重新添加到数组中。