angularJS2 滚动条滚动加载更多数据

客户提出手机端数据滚动加载更多需求，在知道这个需求后首先想到的是运用第三方控件更方便。然后在网上找了一段时间，终于找到了一款无限滚动加载数据控件 angular2-infinite-scroll。

简单介绍一下 angular2-infinite-scroll：

angular2-infinite-scroll 是一个 AngularJS2 的扩展指令，实现了网页的无限滚动的功能，也就是相当于页面滚动到最底部的时候自动加载更多内容。

具体应用在 angular2-infinite-scroll - npm 有详细介绍。

它在iOS设备中是可以正常使用的，但是，在部分Android手机无反应，不知道是不是需要在项目代码里进行适配，当时这个功能已经提交进行使用，没有过多的时间去验证我的想法，只好放弃这个控件，使用最简单粗暴的方法：计算滚动条当前位置触发加载数据方法。

图1（html文件）

元素滚动时执行 JavaScript

  在ngOnInit() {}初始化方法中使用$(window).on('scroll',function (){});监听滚动事件，获取滚动条位置

图2（ts文件）

图3

这里要说一下，刚开始在计算滚动条滚动到底部的位置时只是简单的计算滚动条到达底部时的剩余像素0px时来实现加载更多数据，但是在真机上测试时发现，iOS系统手机滚动条到达底部是剩余像素是0，Android手机会多出几个像素，不同机型像素值不同，为了适应更多机型，使用 ($(document).scrollTop() +$(window).height()) /$(document).height() 计算滚动条所在位置比例。