AngularJS implémente une méthode de chargement par défilement déroulant basée sur ngInfiniteScroll

L'exemple de cet article décrit comment AngularJS implémente le chargement par défilement déroulant basé sur ngInfiniteScroll. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

1 Sur la base du chargement des données dans les pages, comment obtenir l'effet du chargement des données dans les pages via le chargement progressif sur github. un bon plug-in pour AngularJS, adresse Pour : https://github.com/sroze/ngInfiniteScroll

2 Regardons le document officiel

(1) Exemple d'utilisation :

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

Expliquez chaque attribut (la signification de la commande)

①infinite-scroll - {expression} Lors du défilement vers le bas du navigateur, la fonction ou l'expression exécutée est généralement dans le forme d'une fonction.

②infinite-scroll-distance (facultatif) - expression ou nombre {numéro} S'il s'agit d'un nombre, il indique à quelle distance se trouve la barre de défilement depuis le bas du navigateur, et la fonction dans ① est exécutée. . Si cette valeur est définie sur 2, pour un élément d'une hauteur de 1000px, lorsque la distance entre le bas de l'élément et le bas de la fenêtre du navigateur est inférieure à 2000px pixels, la fonction en ① sera exécutée une fois sans défiler une seule fois. (Cette valeur par défaut est 0, c'est-à-dire que lorsque l'élément défile vers le bas de l'élément et atteint le bas de la fenêtre du navigateur (zone de défilement), la fonction dans la zone de défilement est exécutée.

③infini- scroll-disabled (facultatif) - {boolean} Une valeur booléenne utilisée pour indiquer si la fonction d'expression de défilement peut être exécutée. Si la valeur est vraie, cela signifie que la fonction de défilement ne peut pas être exécutée. Cet attribut est généralement utilisé pour mettre en pause ou arrêter. le défilement, par exemple, lorsque nous nous déplaçons lors de la requête de données AJAX. Pour les barres de défilement, vous devez définir cet attribut pour désactiver l'exécution de la fonction de défilement

④infinite-scroll-immediate-check (facultatif). - {boolean} Une valeur booléenne utilisée pour marquer l'instruction lors de l'initialisation de la page. Que ce soit pour l'exécuter une fois initialement (même dans ce cas, il n'y a pas de défilement initial), la valeur par défaut est true, ce qui signifie que la fonction à l'intérieur le sera. exécuté une fois initialement.

⑤infinite-scroll-listen-for-event (facultatif) ) - {string} Un événement Lorsque cet événement est reçu, la fonction de défilement sera réexécutée et la position de défilement sera. repositionné. Par exemple, lorsque l'élément est modifié, la fonction de défilement sera réexécutée

(2) Local Le site officiel DEMO

donne un exemple d'exécution locale et d'implémentation du roll. chargement :

Code HTML :

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

Code JS :

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

J'espère que cet article sera utile à tout le monde dans la programmation AngularJS

Pour plus d'articles connexes sur la méthode AngularJS d'implémentation du défilement déroulant basé sur ngInfiniteScroll, veuillez faire attention au site Web PHP chinois !