VUE列表下拉到底触发分页

<template>
  <div class="indexCont">
    <div class="sBox">
      <img src="@/assets/h5/icon.png">
      <el-input v-model="queryParams.schoolName" placeholder="请输入学校" @input="getList()"></el-input>
    </div>
    <div class="sTitle">
      <div class="sLeft">请选择您孩子所在的学校</div>
    </div>
    <div v-if="noneData">
      <div v-for="(item,index) in list" :key="index" class="listLine" @click="toPay(item.schoolId)">
        <div class="lLeft">
          <img src="@/assets/h5/schoolIcon.png">
          {{ item.schoolName }}
        </div>
        <div class="lRight">
          <img src="@/assets/h5/icon3.png">
        </div>
      </div>
    </div>
    <div class="noneDataBox" v-else>
      <img src="@/assets/h5/noneData.png" mode="widthFix">
      <div class="noneText">还没有内容哦~</div>
    </div>
  </div>
</template>
<script>
import {schoolPage} from "@/api/payFor/publicNumber";

export default {
  name: 'list',
  data() {
    return {
      noneData: false,
      queryParams: {
        page: 1,//当前页 我这边永远是第一页只改变展示数
        limit: 15,//展示数
        line: 15,//每页展示固定数
        newPage: 1,//实际页数
        schoolName: undefined
      },
      list: [],
      // 总条数
      total: 0,
      //下拉加载
      onPullDown: true,
    }
  },
  mounted() {
    this.getList();
    window.addEventListener('scroll', this.scroll, false) // 监听（绑定）滚轮滚动事件
  },
  methods: {
    getList() {
      this.onPullDown = false;
      schoolPage(this.queryParams).then(response => {
        this.list = response.records;
        if (this.list.length > 0) {
          this.noneData = true;
        } else {
          this.noneData = false;
        }
        this.total = parseInt(response.total);
        let totalRow = this.queryParams.newPage * this.queryParams.line
        //判断是否还有下一页
        if(totalRow >= this.total){
          this.onPullDown = false;
        }else{
          this.onPullDown = true;
        }
      });
    },
    //跳转
    toPay(schoolId) {
      this.$router.push({
        path: '/index',
        query: {
          id: schoolId
        }
      })
    },
    // 滚动加载分页
    scroll () {
      var that = this
      // scrollTop 滚动条滚动时，距离顶部的距离
      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      // windowHeight 可视区的高度
      var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
      // scrollHeight 滚动条的总高度
      var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
      // 滚动条到底部的条件
      if (scrollTop + windowHeight == scrollHeight && that.onPullDown == true) {
        // 加载数据
         that.queryParams.newPage = that.queryParams.newPage + 1;
         that.queryParams.limit = that.queryParams.newPage * that.queryParams.line;
         that.getList();
        // that.getBuyoutGoodsList();
      }
    }
  },
  destroyed () {
    window.removeEventListener('scroll', this.scroll) //  离开页面清除（移除）滚轮滚动事件
  }
}
</script>
<style scoped>
.indexCont {
  padding: 15px;
  box-sizing: border-box;
  font-size: 15px;
}

.sBox {
  height: 40px;
  line-height: 40px;
  background-color: #FBFBFB;
  border-radius: 40px;
  display: flex;
  align-items: center;
  padding: 0 15px;
  box-sizing: border-box;
}

.sBox img {
  width: 15px;
  margin-right: 10px;
}

.sBox input {
  background-color: #FBFBFB;
  border: 0;
  height: 100%;
  width: 100%;
}

.sBox input::placeholder {
  color: #9d9d9d;
}

.sTitle {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  height: 40px;
  line-height: 40px;
  margin: 5px 0;
}

.sLeft {
  color: #9D9D9D;
}

.sRight {
  color: #389afb;
  display: flex;
  align-items: center;
}

.sRight img {
  width: 5px;
  margin-left: 5px;
}

.listLine {
  display: flex;
  background-color: #FBFBFB;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  padding: 13px 15px;
  box-sizing: border-box;
  border-radius: 8px;
}

.listLine + .listLine {
  margin-top: 15px;
}

.lLeft {
  display: flex;
  align-items: center;
}

.lLeft img {
  width: 25px;
  margin-right: 8px;
}

.lRight img {
  width: 5px;
}

.noneDataBox {
  width: 100%;
  box-sizing: border-box;
  padding: 0 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  margin-top: 30%;
}

.noneDataBox img {
  width: 55%;
}

.noneText {
  color: #c2cedd;
}
</style>