AngularJS ng-infinite-scroll 滚动刷新

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

使用方法:

  • 1.下载并引用ngInfiniteScroll.js ;

  • 2.当JQuery版本过高时,将会无法使用某些方法;
    网上的解决方案是将所有的$window.xxx改为$(window).xxx, elem.xxx改为$(elem).xxx ;

  • 3.在JS中加载该方法:

      (angular.module('app.main.work', ['infiniteScroll']));
    
  • 4.在使用时需要在HTML页面中加入div使用该方法:

      <div infinite-scroll="workList()" class="scroll-loader" can-load="canLoad" ng-model="paging.max">
    
  • 5.该方法需要传入页面CSS Height值,并且该值必须为确定值,不能为auto;
    为了保证页面显示正常,在相应JS中加入方法计算相应页面规格:

      $scope.screenHeight = window.innerHeight;
      $scope.screenWidth = window.innerWidth;
    
  • 6.在HTML中以CSS的形式将算出的值传入:
    .scroll-loader {
    background: #FFFFFF;
    height: {{ screenHeight }}px;
    width: {{ screenWidth }}px;
    overflow: auto;
    }

  • 7.调整样式以及规格,需要触发滚动条件方可触发该方法;

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

推荐阅读更多精彩内容

  • 通过AngularJS仿豆瓣一刻的案例:https://github.com/zhongxiaolian/doub...
    中小恋阅读 5,758评论 1 21
  • style 修饰width 宽度height 高度title 想说明的text-align 水平对齐...
    蒲公英_前端开发者阅读 13,043评论 4 58
  • html结构 (Emmet) (div.box>div.pic>img[src="images/$.jpg"])*...
    LaBaby_阅读 3,870评论 0 0
  • 5、下述说法中正确的是()。 A半导体RAM信息可读可写,且断电后仍能保持记忆 B半导体RAM是易失性RAM,而静...
    0121_丁爽阅读 3,280评论 1 0
  • 2017年6月1日,拉妹的第13个儿童节。已经和妈妈一般高的小美女了,怎么都没给妈妈一点点时间去回味一下,就...
    记得祝福阅读 1,481评论 3 2

友情链接更多精彩内容