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

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

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

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

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

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

图1(html文件)<div> 元素滚动时执行 JavaScript

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

图2(ts文件)
图3

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

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 11,944评论 0 17
  • 1、窗体 1、常用属性 (1)Name属性:用来获取或设置窗体的名称,在应用程序中可通过Name属性来引用窗体。 ...
    Moment__格调阅读 10,099评论 0 11
  • 前一段时间我的闺蜜让我开一个公众号或者微博写文字成大V,明明有着说得过去的小脸蛋,乌黑的长发,两米大长腿,体重还不...
    qixueeee阅读 2,338评论 0 4
  • 今天我看了一本漫画书上有一个月球生活初体验,其实这是一篇科幻故事,我来讲给大家听。您好,这是您的月球定居...
    帅在阅读 4,447评论 0 1
  • 这是一个一度兴奋而又颓丧的一天 兴奋的是我终于特别想去做一件事 颓丧的是我在做这件事的半途胆怯了 兴奋的是我终于听...
    南枝_____阅读 1,625评论 0 1

友情链接更多精彩内容