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

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

    

      
}

 直接抓住重点，通过@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;
      });
    },

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