【适用于Vue2】滚动到页面底部触发加载列表数据，直到加载到最后一条为止

<!-- 底部加载信息 -->
<div class="bt-loading">
  <div v-if="!sgLloading && 列表数组.length === total" class="no-more-text">
    没有更多了
  </div>
  <div
    v-else
    class="sg-loading"
    v-loading="sgLloading"
    :element-loading-text="sgLoadingText"
  ></div>
</div>



.bt-loading {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  .no-more-text {
    color: gray;
    font-size: 14px;
  }
}

//滚动到底部加载
scroll2Bottom(d) {
  if (this.isScroll2Bottom(this.scrollContainer)) {
    this.currentPage++;
    let start = (this.currentPage - 1) * this.pageSize;
    if (start < this.total) {
      this.search(); //刷新数据
    }
  }
},
// 是否滚动到底部
isScroll2Bottom(scrollContainer) {
  const scrollTop = scrollContainer.scrollTop; // 获取当前滚动条的位置
  const windowHeight = window.innerHeight; // 浏览器视口的高度
  const scrollHeight = scrollContainer.scrollHeight; // 可滚动的的总高度
  return scrollTop + windowHeight >= scrollHeight; // 当滚动位置加上窗口高度大于等于文档高度时，表明到达底部
},

【实现手机端上滑滚动加载列表】判断页面是否滚动到底部或者指定元素位置_手机端滑动加载逻辑 offsetheight-CSDN博客文章浏览阅读5.1k次，点赞2次，收藏2次。  https://blog.csdn.net/qq_37860634/article/details/115664267https://blog.csdn.net/qq_37860634/article/details/115664267https://blog.csdn.net/qq_37860634/article/details/115664267https://blog.csdn.net/qq_37860634/article/details/115664267