이 기사의 예에서는 AngularJS가 ngInfiniteScroll을 기반으로 드롭다운 스크롤 로딩을 구현하는 방법을 설명합니다. 참고하실 수 있도록 자세한 내용은 다음과 같습니다.
1. 페이지 내 데이터 로딩을 기반으로 롤링 로딩을 통해 페이지 내 데이터 로딩 효과를 구현하는 방법이 있습니다. AngularJS를 위한 좋은 플러그인, 주소: https://github.com/sroze/ngInfiniteScroll
2. 공식 문서
를 살펴보겠습니다. (1) 사용 예:
<ANY infinite-scroll='{expression}' [infinite-scroll-distance='{number}'] [infinite-scroll-disabled='{boolean}'] [infinite-scroll-immediate-check='{boolean}'] [infinite-scroll-listen-for-event='{string}']> </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='myApp' ng-controller='DemoController'> <div infinite-scroll='loadMore()' infinite-scroll-distance='2'> <img ng-repeat='image in images' ng-src='http://placehold.it/225x250&text={{image}}'> </div> </div>
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 중국어 웹사이트에 주목하세요!