AngularJS implements drop-down scrolling loading method based on ngInfiniteScroll

The example in this article describes how AngularJS implements drop-down scrolling loading based on ngInfiniteScroll. Share it with everyone for your reference, the details are as follows:

1. On the basis of loading data in pages, how to achieve the effect of loading data in pages through rolling loading? On github, there is a good plug-in for AngularJS, address For: https://github.com/sroze/ngInfiniteScroll

2. Let’s look at the official document

(1) Usage example:

<ANY infinite-scroll=&#39;{expression}&#39;
   [infinite-scroll-distance=&#39;{number}&#39;]
   [infinite-scroll-disabled=&#39;{boolean}&#39;]
   [infinite-scroll-immediate-check=&#39;{boolean}&#39;]
   [infinite-scroll-listen-for-event=&#39;{string}&#39;]>
</ANY>

Explanation Each attribute (the meaning of the command)

①infinite-scroll - {expression} When scrolling to the bottom of the browser, the function or expression executed is usually in the form of a function.

②infinite-scroll-distance (optional) - {number} expression or number. If it is a number, it indicates how far the scroll bar is from the bottom of the browser, and the function in ① is executed. If this value is set to 2, for an element with a height of 1000px, when the distance between the bottom of the element and the bottom of the browser window is within 2000px pixels, the function in ① will be executed once without scrolling once. (This value defaults to 0, that is, when the element scrolls to the bottom of the element and reaches the bottom of the browser window (scroll area), the function in the scroll area is executed.

③infinite-scroll-disabled (optional) - {boolean} A Boolean value used to indicate whether the scrolling expression function can be executed. If the value is true, it means that the scrolling function cannot be executed. This attribute is usually used to pause or stop scrolling when we move the data during AJAX request. For scroll bars, you need to set this attribute to disable the execution of the scroll function.

④infinite-scroll-immediate-check (optional) - {boolean} A Boolean value used to mark the instruction when initializing the page. Whether to execute it once initially (even in this case, there is no initial scrolling), the default value is true, which means that the function inside will be executed once initially.

⑤infinite-scroll-listen-for-event (optional). ) - {string} An event. When this event is received, the scroll function will be re-executed and the scroll position will be repositioned. For example, when the element is modified, the scroll function will be re-executed.

(2) Local. The DEMO

official website gives an example of running locally and implementing rolling loading:

HTML code:

<div ng-app=&#39;myApp&#39; ng-controller=&#39;DemoController&#39;>
 <div infinite-scroll=&#39;loadMore()&#39; infinite-scroll-distance=&#39;2&#39;>
  <img ng-repeat=&#39;image in images&#39; ng-src=&#39;http://placehold.it/225x250&text={{image}}&#39;>
 </div>
</div>

JS code:

var myApp = angular.module('myApp', ['infinite-scroll']);
myApp.controller('DemoController', function($scope) {
 $scope.images = [1, 2, 3, 4, 5, 6, 7, 8];
 $scope.loadMore = function() {
  var last = $scope.images[$scope.images.length - 1];
  for(var i = 1; i <= 8; i++) {
   $scope.images.push(last + i);
  }
 };
});

I hope this article will explain It will be helpful to everyone in AngularJS programming.

For more related articles on AngularJS’s method of implementing drop-down scrolling based on ngInfiniteScroll, please pay attention to the PHP Chinese website!