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

原创已于 2022-12-21 19:52:17 修改 · 2.8k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #javascript

于 2022-10-27 15:37:49 首次发布

在项目开发里，需在PC上实现页面滚动加载数据。具体做法是进入页面时监听页面滚动事件，并在methods中编写对应方法。

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

进页面监听页面滚动事件

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

在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();
      }
    },