AngularJS implementiert eine Drop-Down-Scroll-Lademethode basierend auf ngInfiniteScroll

Das Beispiel in diesem Artikel beschreibt, wie AngularJS das Laden von Dropdown-Bildläufen basierend auf ngInfiniteScroll implementiert. Teilen Sie es als Referenz mit allen:

1 Auf der Grundlage des Ladens von Daten in Seiten erfahren Sie, wie Sie den Effekt des Ladens von Daten in Seiten durch rollierendes Laden erzielen ein gutes Plug-in für AngularJS, Adresse Für: https://github.com/sroze/ngInfiniteScroll

2. Schauen wir uns das offizielle Dokument an

(1) Anwendungsbeispiel:

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

Erklären Sie jedes Attribut (die Bedeutung des Befehls)

①infinite-scroll - {Ausdruck} Wenn Sie zum unteren Rand des Browsers scrollen, befindet sich die ausgeführte Funktion oder der Ausdruck normalerweise im Form einer Funktion.

②infinite-scroll-distance (optional) – {Zahl}-Ausdruck oder Zahl. Wenn es sich um eine Zahl handelt, gibt sie an, wie weit die Bildlaufleiste vom unteren Rand des Browsers entfernt ist, und die Funktion in ① wird ausgeführt . Wenn dieser Wert für ein Element mit einer Höhe von 1000 Pixel auf 2 gesetzt ist und der Abstand zwischen der Unterseite des Elements und der Unterseite des Browserfensters innerhalb von 2000 Pixeln liegt, wird die Funktion in ① einmal ausgeführt, ohne einmal zu scrollen. (Dieser Wert ist standardmäßig 0, d. h. wenn das Element zum unteren Rand des Elements scrollt und den unteren Rand des Browserfensters (Bildlaufbereich) erreicht, wird die Funktion im Bildlaufbereich ausgeführt.

③unendlich- scroll-disabled (optional) – {boolean} Ein boolescher Wert, der angibt, ob die Scroll-Ausdrucksfunktion ausgeführt werden kann. Wenn der Wert wahr ist, bedeutet dies, dass die Scroll-Funktion nicht ausgeführt werden kann Scrollen, zum Beispiel, wenn wir uns während der AJAX-Anfrage nach Daten bewegen, müssen Sie dieses Attribut festlegen, um die Ausführung der Scroll-Funktion zu deaktivieren (optional). - {boolean} Ein boolescher Wert, der zum Markieren der Anweisung beim Initialisieren der Seite verwendet wird. Gibt an, ob sie zunächst einmal ausgeführt werden soll (selbst in diesem Fall erfolgt kein anfänglicher Bildlauf). Der Standardwert ist true, was bedeutet, dass die darin enthaltene Funktion ausgeführt wird Wird zunächst einmal ausgeführt.

⑤infinite-scroll-listen-for-event (optional) – {string} Ein Ereignis wird erneut ausgeführt und die Scroll-Position wird aktiviert Wenn das Element beispielsweise geändert wird, wird die Scroll-Funktion erneut ausgeführt.

(2) Die offizielle DEMO-Website enthält ein Beispiel für die lokale Ausführung und Implementierung Laden:

HTML-Code:

JS-Code:

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

Ich hoffe, dieser Artikel wird für alle in der AngularJS-Programmierung hilfreich sein

Weitere verwandte Artikel zur AngularJS-Methode zur Implementierung des Dropdown-Bildlaufs basierend auf ngInfiniteScroll finden Sie auf der chinesischen PHP-Website!