页面滚动到底部后请求下一页数据，伪分页做法

第一种做法

// 在后台没有提供分页的基础上，要想长列表实现瀑布流滚动，当列表即将滚动到底部时，会触发事件并加载更多列表项。

首先要做的就是监听页面的滚动事件，如下利用window.addEventListener对页面的滚动进行监听，定义监听到滚动时的方法，在方法中可以取到页面的滚动高度scrollTop ，可视高度clientHeight ，内容高度scrollHeight，

当scrollTop + clientHeight == scrollHeight时，页面就是滚动到底部了

window.addEventListener("scroll", this.handleScroll, true);

handleScroll() {
      if (this.paymentList.length >= this.total) return
      let scrollTop = document.documentElement.scrollTop;//滚动高度
      let clientHeight = document.documentElement.clientHeight;//可视高度
      let scrollHeight = document.documentElement.scrollHeight;//内容高度

      scrollTop + clientHeight == scrollHeight;
      if (scrollTop + clientHeight == scrollHeight) {
        this.InquireMsg() // 每滑动到底部一次就调用一次接口
      }
    },

在实现伪分页的主要思路上，在每次页面滚动到底部时，调用 InquireMsg 这个方法，用循环每次往空数组paymentList中添加已经拿到的后端返回的数据，循环的次数就是添加的条数，每次调用，每次添加的数组的length都是在增加的，所以也不会添加重复的数据，直至添加完

    InquireMsg() {
      let reqdata = {
        startDate: this.starttimeapi,
        endDate: this.endtimeapi
      }
      organEndowmentPayment(reqdata).then((res) => {
        let { code, data, msg } = res
        if (code == 200) {
          this.showemptyBox = false
          this.total = data.paymentList.length
          if (data.paymentList.length > 0) {
            // 滚动加载，i为加载条数
            for (let i = 0; i < 10; i++) {
              if (this.paymentList.length < data.paymentList.length) {
                this.paymentList.push(data.paymentList[this.paymentList.length])
              }
            }
            // 数据加载完毕结束loading
            this.loading = false;
            if (this.paymentList.length >= data.paymentList.length) {
              this.finished = true;
              this.finishedText = "没有更多数据了";
            }
          } else {
            this.finished = true;
            this.loading = false;
            this.emptyMsg = msg
            this.showemptyBox = true;
          }
        }
      }).catch((error) => {
        console.log(error, 'error');
        this.paymentList = []
        this.loading = false;
        this.emptyMsg = error.msg;
        this.showemptyBox = true;
        this.finishedText = ''
      })
    },

第二种做法

依旧是先监听页面的滚动事件

window.addEventListener("scroll", this.handleScroll, true);

这次实现的思路和上面的就不一样了，这次是在页面滚动到底部时，往空数组中添加数据，每次滚动到底部，会巧妙的运用数组的splice方法，从数组中截取数据，这个方法也有删除的意思，就是把截取的数据从数组中删除掉，splice方法返回删除的数据，所以当截取完所有数据，就可以判断是否还有数据，没有数据就完成了。

handleScroll() {
      // this.$storemit('showLoading');
      if (this.paymentList.length >= this.total) return
      let scrollTop = document.documentElement.scrollTop;//滚动高度
      let clientHeight = document.documentElement.clientHeight;//可视高度
      let scrollHeight = document.documentElement.scrollHeight;//内容高度
      if (scrollTop + clientHeight == scrollHeight) {
        this.paymentList = [...this.paymentList, ...this.initialpayment.splice(0, 10)]
        if (this.paymentList.length >= this.total) {
          this.finished = true;
          this.finishedText = "没有更多数据了";
        }
      }
    },

在 InquireMsg 方法中，当拿到数据，判断有数据的length不为0后，还是巧妙的运用数组splice方法，把截取到的数据赋给定义好的空数组，渲染到页面上，在每次滚动到底部时，在去从零截取数据，直到所有数据截取完。

    InquireMsg() {
      this.finishedText = '';
      let reqdata = {
        startDate: this.starttimeapi,
        endDate: this.endtimeapi
      }
      endowmentPayment(reqdata).then((res) => {
        let { code, data, msg } = res
        if (code == 200) {
          this.showemptyBox = false
          this.initialpayment = data.paymentList //定义空数组接收所有数据
          this.total = data.paymentList.length

          if (data.paymentList.length > 0) {
            this.paymentList = this.initialpayment.splice(0, 10)
            // 数据加载完毕结束loading
            this.loading = false;
            if (this.paymentList.length >= this.total) {
              this.finished = true;
              this.finishedText = "没有更多数据了";
            }
          } else {
            this.finished = true;
            this.loading = false;
            this.emptyMsg = msg
            this.showemptyBox = true;
          }
        }
      }).catch((error) => {
        console.log(error, 'error');
        this.paymentList = []
        this.loading = false;
        this.emptyMsg = error.msg;
        this.showemptyBox = true;
        this.finishedText = ''
      })
    },