内容隐藏

在本教程中，我们将看到如何在AngularJS中使用ng-infinite-scroll进行无限滚动。 ng-无限滚动提供了一条指令，可以在向下滚动页面时自动加载数据。

查看有关如何在AngularJS中使用ng-infinite-scroll进行无限滚动的演示。

ng-无限滚动

infiniteScroll允许您指定元素的底部接近浏览器窗口底部时的行为。无限滚动不仅可以改善交互效果，而且还可以减少服务器的延迟，因为我们不必一次从浏览器中加载服务器中的所有数据。

实作

要创建无限滚动，我们将使用 AngularJS 及其指令 ng-无限滚动和引导程序用于设计目的。
让我们从实现依赖关系开始。

现在将所需的库包含到我们的 index.html

index.html


<html>
  <head>
    <link type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  </head>

  <body>
	
 	 <!-- OUR APP GOES HERE -->

	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
	<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/ngInfiniteScroll/1.3.0/ng-infinite-scroll.min.js"></script>
	<script src="app/app.js"></script>	
	
  </body>

</html>

用法

在实现所有依赖项之后 index.html 文件。我们必须定义我们的应用程序，然后在应用程序中注入ng-infinite-scroll模块。
因此，让我们在主应用程序模块中注入依赖项。


angular.module('infinite-Scrolling', ['infinite-scroll']);

然后，我们必须将指令属性设置为一个元素。


<div 无限滚动="scroll_function()"></div>

现在，一旦您到达页面底部，就会调用scroll_function。

获取更多与ng-infinite-scroll相关的参数这里！

无限滚动入门

让我们从一个实际的例子开始，通过实现指令和我们的函数 index.html 文件。

index.html


<body ng-app="infinite-Scrolling">
  <div class="container" ng-controller="卷动">
    <div class="main-wrapper">
      <div class="row" 无限滚动='load()'>
        <div class="col-xs-6 col-md-3" ng-repeat='image in images'>
          <a class="thumbnail">
            <img src="http://placehold.it/200x100/black/&text={{image}}">
          </a>
        </div>
      </div>
    </div>
  </div>
</body>

如您所见，我们通过包含控制器的无限滚动定义了应用程序 卷动 与功能 加载（）。每次到达页面底部时，它都会调用该函数并将其他数据加载到页面底部。

现在，让控制器运行：

app.js


var app = angular.module("infinite-Scrolling", ["无限滚动"]);

angular.module("无限滚动").value("THROTTLE_MILLISECONDS", 250);

app.controller("卷动", function($scope, $http) {
  $scope.images = [1, 2, 3, 4, 5];

  $scope.load = function() {
    var last = $scope.images[$scope.images.length - 1];
    for (var i = 1; i <= 5; i++) {
      $scope.images.push(last + i);
    }
  };
});

如您所见，添加油门可以防止在加载更多数据时屏幕上缺少效果。并在每次调用该函数时再添加5个数据。

参量

无限滚动– {表达式} –当元素的底部接近浏览器窗口的底部时要求值的表达式（通常是函数调用）。
无限滚动距离（可选）– {number} –一个数字，表示在触发由无限滚动指定的表达式之前，元素底部必须与浏览器窗口底部之间的距离。以窗口高度的倍数测量；例如，如果浏览器窗口的高度为1000像素，并且无限滚动距离设置为2，则当元素的底部位于浏览器窗口底部的2000像素以内时，将计算无限滚动表达式。默认值为0（例如，当元素的底部与浏览器窗口的底部交叉时，将对表达式求值）。
无限滚动停用（可选）– {boolean} –一个布尔表达式，当为true时，它指示即使满足所有其他条件，也不应评估无限滚动表达式。通常用于限制或暂停无限滚动，例如在通过Ajax加载数据时。如果滚动事件触发了指令，但是此属性阻止表达式求值，则将在此属性再次求值为false后立即处理该事件。
无限滚动立即检查（可选）– {boolean} –一个布尔表达式，指示该指令应立即检查以查看滚动事件是否会触发对无限滚动表达式的求值，即使没有发生滚动事件也是如此。如果指令元素内的内容可能不足以填满整个浏览器窗口的高度，则很有用。默认为true。
无限滚动监听事件（可选）– {string} – 收到事件后将导致重新运行滚动位置检查的事件的名称。如果您需要手动触发滚动处理程序（例如，在不更改集合的情况下过滤或修改了您的项目），这将很有用。
无限滚动容器（可选）– {HTMLElement | [] |串} –包含滚动的HTMLElement。这是一个表达式，它产生一个HTMLElement对象，一个数组的第一个元素使用angular.element（）求值或一个用作document.querySelector（）参数的字符串。选择器与jQuery选择器相似，但应评估为单个元素。记住要在字符串常量周围使用单引号。
无限滚动使用文档底部（可选）– {boolean} –是的，请使用文档的底部而不是包含元素来确定无限滚动距离。
无限滚动父级（可选） –如果存在，则跟踪的滚动容器是放置ngInfiniteScroll指令的元素的父元素。

获得更多角度这里！

ng-无限滚动用于AngularJS中的无限滚动

ng-无限滚动

实作

用法

无限滚动入门

参量

有关