前端分页,懒加载

69 阅读1分钟
// 前端分页,懒加载
lazyLoading(){
  let dom = document.querySelector(".tableClass");
  dom.addEventListener("scroll", () => {
    // 获取距离顶部的距离
    const scrollTop = dom.scrollTop;
    // 获取可视区的高度
    const windowHeight = dom.clientHeight;
    // 获取滚动条的总高度
    const scrollHeight = dom.scrollHeight;
    if (scrollTop + windowHeight >= scrollHeight) {
      // 把距离顶部的距离加上可视区域的高度 等于或者大于滚动条的总高度就是到达底部
      this.show = true;
      // console.log('show',this.show);
      if (this.page.index <= this.page.totalPagesSize) {
        this.page.index++;
        const arr = this.lazyDatas.slice(
            (this.page.index - 1) * this.page.size,
            this.page.index * this.page.size
        );
        this.desserts.push(...arr);
      }
    }
    // console.log('00',"距顶部" + scrollTop + "可视区高度" + windowHeight + "滚动条总高度" + scrollHeight);
  });
},