AngularJS는 ngInfiniteScroll을 기반으로 드롭다운 스크롤 로딩 방법을 구현합니다.

이 기사의 예에서는 AngularJS가 ngInfiniteScroll을 기반으로 드롭다운 스크롤 로딩을 구현하는 방법을 설명합니다. 참고하실 수 있도록 자세한 내용은 다음과 같습니다.

1. 페이지 내 데이터 로딩을 기반으로 롤링 로딩을 통해 페이지 내 데이터 로딩 효과를 구현하는 방법이 있습니다. AngularJS를 위한 좋은 플러그인, 주소: https://github.com/sroze/ngInfiniteScroll

2. 공식 문서

를 살펴보겠습니다. (1) 사용 예:

<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>

각 속성 설명(명령어 의미)

①infinite-scroll - {expression} 브라우저 하단으로 스크롤할 때 실행되는 함수나 표현식은 대개 함수의 형태.

②infinite-scroll-distance (선택) - {숫자} 수식 또는 숫자인 경우 스크롤바가 브라우저 하단에서 얼마나 떨어져 있는지를 나타내며, ①의 기능이 실행됩니다. . 이 값을 2로 설정하면 높이가 1000px인 요소의 경우 요소 하단과 브라우저 창 하단 사이의 거리가 2000px 픽셀 이내인 경우 스크롤을 한 번 하지 않고 ①의 기능이 한 번 실행됩니다. (이 값의 기본값은 0, 즉 요소가 요소의 하단까지 스크롤하여 브라우저 창 하단(스크롤 영역)에 도달하면 스크롤 영역의 기능이 실행됩니다.

③infinite- scroll-disabled (선택 사항) - {boolean} 스크롤 표현식 기능을 실행할 수 있는지 여부를 나타내는 Boolean 값입니다. 값이 true이면 스크롤 기능을 실행할 수 없음을 의미합니다. 이 속성은 일반적으로 일시 중지 또는 중지하는 데 사용됩니다. 예를 들어 AJAX 데이터 요청 중에 이동할 때 스크롤 막대의 경우 스크롤 기능 실행을 비활성화하려면 이 속성을 설정해야 합니다. - {boolean} 페이지를 초기화할 때 명령어를 표시하는 데 사용되는 부울 값입니다. 처음에 한 번 실행할지 여부(이 경우에도 초기 스크롤이 없음), 기본값은 true이며, 이는 내부 함수가

⑤infinite-scroll-listen-for-event (선택) ) - {string} 이 이벤트를 수신하면 스크롤 기능이 다시 실행되고 스크롤 위치가 변경됩니다. 예를 들어 요소가 수정되면 스크롤 기능이 다시 실행됩니다.

(2) 로컬. DEMO

공식 웹사이트에서는 롤링을 구현하는 예를 제공합니다. loading:

HTML 코드:

JS 코드:

<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>

이 글이 AngularJS 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.

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);
  }
 };
});

AngularJS가 ngInfiniteScroll을 기반으로 드롭다운 스크롤 로딩을 구현하는 방법에 대한 더 많은 관련 기사를 보려면 PHP 중국어 웹사이트에 주목하세요!