vue中实现滚动条加载更多加载表格数据

最新推荐文章于 2024-08-02 18:37:54 发布

zyj12138

最新推荐文章于 2024-08-02 18:37:54 发布

阅读量852

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/zyj12138/article/details/117731953

版权

这篇博客分享了作者在项目中实现滚动条到底部加载更多数据的实践经验，特别是针对树型表格且每次只能展开一个的情况。文章提到，由于需要根据展开的内容判断加载，因此需要维护两个不同的初始高度变量originRQTHeight。项目采用了vxe-table库，作者欢迎对相关技术感兴趣的同学进行交流。

摘要由CSDN通过智能技术生成

时隔3个月终于要更新了我发现网上写的很多都不尽人意或者比较散，这里更新我自己在项目中实现的滚动条到底部开始加载数据：

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

    handleScroll(e) {
   
      //变量scrollTop是滚动条滚动时，距离顶部的距离
      var scrollTop = e.target.scrollTop;
      //变量windowHeight是可视区的高度
      var windowHeight = e.target.clientHeight;
      //变量scrollHeight是滚动条的总高度
      var scrollHeight = e.target.scrollHeight;
      //滚动条到底部的条件
      // console.log(scrollTop, windowHeight, scrollHeight);
      if (scrollTop + windowHeight >= scrollHeight) {
   
        //在此处放入你的加载更多方法
        this.loadingShow = true;
        // this.originHeight = scrollHeight;
        // console.log(this.designType);
        if (this.designType == "RQT") {