滚动条加载分页数据

亦凉 2022-09-04 11:56 342阅读 0赞

**<div id="listBody"> </div>**

** listBody 数据外最大的盒子**

data(){
    return{
        page: {
            pageNum: 1, //页码
            pageSize: 10,
            totalCount: 0,
          },
    }
    }

mounted() {
    //获取数据最大的盒子
        let wrap = document.getElementById("listBody");
        let me = this;
    
        wrap.addEventListener("scroll", function (event) {
          //  日程的懒加载
    
          var ev = window.event || event;
    
          let scrollTop = ev.currentTarget.scrollTop || document.body.scrollTop; //  为滚动条在Y轴上的滚动距离。
          let clientHeight =
            ev.currentTarget.clientHeight || document.body.clientHeight; // 为内容可视区域的高度。
          let scrollHeight =
            ev.currentTarget.scrollHeight || document.body.scrollHeight; // 为内容可视区域的高度加上溢出（滚动）的距离。 // debugger
          let isDiBu = parseInt(scrollTop) + clientHeight - scrollHeight;
          isDiBu = Math.abs(isDiBu) == 1 || Math.abs(isDiBu) == 0;
          if (scrollHeight > clientHeight && isDiBu) {
            // 底部  .scrollHeight-info.scrollTop =
            if (me.page.totalCount >= me.page.pageSize) {
              me.page.pageSize += 10;  //每滚动一次加载10条数据
               //查询发放
              me.selectLogisticsCheckListData();
            }
          }
        });
       
      },

#listBody::-webkit-scrollbar {
      width: 5px;
      height: 1px;
      background-color: #fff;
    }
    #listBody::-webkit-scrollbar-track {
      background-color: #fff;
      border-radius: 10px;
    }
    #listBody::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background-color: #ccc;
    }
    
      #listBody {
        max-height: 100%;
        overflow-y: auto;
        padding-bottom: 50px;
        padding-right: 20px;
      }