Angularjs method based on Nginfinitescroll to realize drop-down rolling load _angularjs

This article illustrates the method of Angularjs based on Nginfinitescroll to implement the Drop-down rolling load. Share to everyone for your reference, specific as follows:

1. On the basis of the page loading data, how to achieve the effect of loading data by rolling, GitHub on the Angularjs, there is a good plug-in, the address is: Https://github.com/sroze/ngInfiniteScroll

2. Here's a look at the official documents.

(1) Using the sample example:

<any infinite-scroll= ' {expression} '
   [infinite-scroll-distance= ' {number} ']
   [infinite-scroll-disabled= ' {Boolean} ']
   [infinite-scroll-immediate-check= ' {Boolean} ']
   [infinite-scroll-listen-for-event= ' {string} ']>
</ANY>

Explain individual attributes (meaning of instructions)

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

②infinite-scroll-distance (optional)-{number} expression or digit, if a number that indicates how far the scroll bar is from the bottom of the browser, perform the function inside the ①. If you set this value to 2, for elements of the 1000px height, when the bottom of the element is less than 2000px pixels from the bottom of the browser window and does not scroll once, the function inside the ① is executed once. (This value defaults to 0, that is, when the element scrolls to the bottom of the element to reach the bottom of the browser window (scrolling area), the function inside the scrolling area is executed.)

③infinite-scroll-disabled (optional)-{Boolean} A Boolean value that flags whether the scrolling expression function can execute, or if the value is true, means that the scrolling function cannot be executed. This property, which is typically used to pause or stop scrolling. For example, when we move the scroll bar in the process of requesting data from Ajax, we need to set this property to prevent the scrolling function from executing.

④infinite-scroll-immediate-check (optional)-{Boolean} A Boolean value that is used to flag whether the instruction is initially executed once when the page is initialized (even if there is no initial scrolling), and the default is true. Indicates that the initial function of the ① is executed once.

⑤infinite-scroll-listen-for-event (optional)-{string} an event that, when accepted to this event, will rerun the scrolling function and reposition the scrolling position, for example, when the element is modified, the scrolling function is rerun.

(2) Local demo

The official website gives an example of running locally, implementing scrolling loading:

HTML code:

<div ng-app= ' myApp ' ng-controller= ' Democontroller ' >
 <div infinite-scroll= ' Loadmore () ' Infinite-scroll-distance= ' 2 ' >
  
 </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);
  }
 ;
});

More readers interested in ANGULARJS related content can view the site topics: "Angularjs Introduction and Advanced Tutorials" and "ANGULARJS MVC Framework Summary"

I hope this article will help you to Angularjs program design.