AngularJS implements drop-down and scroll loading based on ngInfiniteScroll

This article mainly introduces AngularJS's method of implementing drop-down and rolling loading based on ngInfiniteScroll, and analyzes the downloading, functions, attributes, and usage of the AngularJS drop-down and rolling plug-in ngInfiniteScroll in the form of examples, for more information, see the examples in this article. We will share this with you for your reference. The details are as follows:

1. On the basis of page loading data, how to load data by rolling, realize the effect of page loading data, github, for AngularJS, there is a good plug-in, address: https://github.com/sroze/ngInfiniteScroll

2. See the official documents below.

(1) Example:

Explain each attribute (meaning of the instruction)

① Infinite-scroll-{expression} the function or expression executed when it is scrolled to the bottom of the browser, 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, execute the function in ①. If this value is set to 2, for elements with a height of PX, when the bottom of the element is within px from the bottom of the browser window, if it is not rolled once, the function in ① will be executed once. (The default value is 0, that is, when the element scrolls to the bottom of the element to reach the bottom of the browser window (scroll area), the function in the scroll area is executed.

③ Infinite-scroll-disabled (optional)-{boolean} is a boolean value used to indicate whether the rolling expression function can be executed. If the value is true, the rolling function cannot be executed. This attribute is usually used to pause or stop scrolling. For example, when we move the scroll bar during AJAX request data, we need to set this attribute to prohibit the execution of the scrolling function.

④ Infinite-scroll-immediate-check (optional)-{boolean} is a boolean value used to indicate whether the command is initially executed at page initialization (even in this case, no initial scrolling). The default value is true, indicating that the first function will be executed.

⑤ Infinite-scroll-listen-for-event (optional)-{string} an event. When this event is received, the rolling function is re-executed to locate the rolling position, for example, when an element is modified, the scrolling function is re-executed.

(2) Local DEMO

The official website provides an example of local running to implement rolling loading:

HTML code:

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 help you with AngularJS programming.

For more AngularJS articles on how to implement pull-down and scroll loading based on ngInfiniteScroll, refer to the PHP Chinese website!