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使用该方法:

      
  • 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.调整样式以及规格,需要触发滚动条件方可触发该方法;

你可能感兴趣的:(AngularJS ng-infinite-scroll 滚动刷新)