vue前端界面实现滚动加载分页数据

在项目开发中PC实现页面滚动加载数据，特记录

1. 进页面监听页面滚动事件

mounted() {
    window.addEventListener("scroll", this.lazyLoad);
}

2. 在methods中写对应方法

 lazyLoad() {
     // 滚动到底部，处理事件，获取 可视区高度`、`滚动高度`、`页面高度`
     let scrollTop =
       document.documentElement.scrollTop || document.body.scrollTop;
     let clientHeight = document.documentElement.clientHeight;
     let scrollHeight = document.documentElement.scrollHeight;
     if (scrollTop + clientHeight >= (scrollHeight - 302)) {
       // 这里做了处理防止多次触发，保证只执行一次
       if(this.timer) return
       this.timer= setTimeout(() => {
        this.loadList();
        this.timer = null
       },500)
     }
    },
	 // 滚动加载
    loadList() {
      if (this.pages.page < this.pages.totalPage) {
        this.pages.page = Number(this.pages.page) + 1;
        //SendDataInfo即查询数据时的参数
        this.SendDataInfo.page_no = this.pages.page;
          this.getDataList();
      }
    },