滑动加载更多数据

最新推荐文章于 2024-05-13 08:47:21 发布

Miya_Ye

最新推荐文章于 2024-05-13 08:47:21 发布

阅读量569

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery

本文链接：https://blog.youkuaiyun.com/april_4/article/details/53707041

jquery 专栏收录该内容

11 篇文章

订阅专栏

为解决云环境中大量端口信息展示导致页面加载过慢的问题，本文介绍了一种使用Angular 2.0实现的端口信息延迟加载方案，并详细解析了实现原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们有一个用户选择云环境下所有端口展示的方案，因为太多了（上万），一次性加载页面要等5s以上，考虑延迟加载，写了个小demo

代码长这个样子，我是用angular2.0

<div class="father" style="height:100px;overflow:auto;">  
        <div class="child" style='border:1px solid red;margin-top:20px;color:grey;height:200px' ></div>  
</div>

 ngAfterViewInit() {
    let that = this;
    $(".father").bind("scroll",function(e){
      var sum =this.scrollHeight;
      if(sum <= $(this).scrollTop()+$(this).height()){
        $(".father").append($(".child").clone());
      }
    })
  }
}

我也来解释下下面几个参数

100px的框包含了220px的内容，有滚动条

scrollHeight ：就是220px，我理解就是文档的全部高度

scrollTop：滚动条的滚动距离

height：断点看是198（上下1px padding），就是father的高度

那么就是实际窗口高度+滚动条滚动距离 = 文档的全部高度，说明到底了，这时候加载（或者不到底加载，那么再给文档全部高度减去一个自定义常量）