vue2.0 实现滚动底部加载第二页

1.定义分页参数

queryParams: {
  pageNum: 1,
  pageSize: 6,
},

2.核心方法

watchScroll() {
  let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  let clientHeight = document.documentElement.clientHeight;
  let scrollHeight = document.documentElement.scrollHeight;
  if (scrollTop + clientHeight >= scrollHeight) {
    console.log('到底啦')
    this.loading = true;
    this.queryParams.pageNum+=1;
    listCourseAll(this.queryParams).then(response => {
      if (response.rows.length != 0) {
        response.rows.forEach( (item)=> {
          this.courseList.push(item);
        });
        this.total = response.total;
      } else {
        this.queryParams.pageNum -= 1;
        if (response.rows.length == 0) {
          this.loading = false;
          this.isShow = true;
          //this.$message.warning("到底了");
        } else {
          this.$message.error("操作失败");
        }
      }
      this.loading = false;
    });
  }
},

3.页面监听

created() {
   window.addEventListener("scroll", this.watchScroll);
},