Ionic - JavaScript-Schriftrolle

Das Element, das für die Bildlaufmanipulation in ionischen Apps verwendet wird, wird als das bezeichnet ion-scroll.

Scrollen verwenden

Mit den folgenden Codefragmenten werden scrollbare Container erstellt und Bildlaufmuster angepasst. Zuerst erstellen wir unser HTML-Element und fügen ihm Eigenschaften hinzu. Wir werden hinzufügen →direction = "xy"um das Scrollen zu jeder Seite zu ermöglichen. Wir werden auch die Breite und die Höhe für das Bildlaufelement einstellen.

HTML Quelltext

<ion-scroll zooming = "true" direction = "xy" style = "width: 320px; height: 500px">
   <div class = "scroll-container"></div>
</ion-scroll>

Als nächstes werden wir das Bild unserer Weltkarte hinzufügen div Element, das wir innerhalb der erstellt haben ion-scroll und stellen Sie seine Breite und Höhe ein.

CSS-Code

.scroll-container {
   width: 2600px;
   height: 1000px;
   background: url('../img/world-map.png') no-repeat
}

Wenn wir unsere App ausführen, können wir die Karte in alle Richtungen scrollen. Das folgende Beispiel zeigt den Nordamerika-Teil der Karte.

Wir können diese Karte zu einem beliebigen Teil scrollen. Lassen Sie uns einen Bildlauf durchführen, um Asien zu zeigen.

Es gibt andere Attribute, die auf die angewendet werden können ion-scroll. Sie können sie in der folgenden Tabelle überprüfen.

Bildlaufattribute

Attribut Art Einzelheiten
Richtung Zeichenfolge Mögliche Richtungen der Schriftrolle. Standardwert isty
Delegate-Handle Zeichenfolge Wird zur Identifizierung von Schriftrollen mit verwendet $ionicScrollDelegate.
Verriegelung Boolescher Wert Wird verwendet, um das Scrollen in jeweils eine Richtung zu sperren. Der Standardwert ist true.
Paging Boolescher Wert Wird verwendet, um zu bestimmen, ob das Paging mit Bildlauf verwendet wird.
On-Refresh Ausdruck Wird beim Pull-to-Refresh aufgerufen.
On-Scroll Ausdruck Wird beim Scrollen aufgerufen.
Bildlaufleiste-x Boolescher Wert Sollte eine horizontale Bildlaufleiste angezeigt werden. Der Standardwert ist true.
Bildlaufleiste-y Zeichenfolge Sollte eine vertikale Bildlaufleiste angezeigt werden. Der Standardwert ist true.
Zoomen Boolescher Wert Dient zum Anwenden von Pinch-to-Zoom.
Min-Zoom ganze Zahl Minimaler Zoomwert.
Max-Zoom ganze Zahl Maximaler Zoomwert.
Bildlaufleiste-x Boolescher Wert Wird verwendet, um das Bouncen zu aktivieren. Der Standardwert unter IOS ist true, unter Android false.

Unendliche Schriftrolle

Ein unendlicher Bildlauf wird verwendet, um ein gewisses Verhalten auszulösen, wenn der Bildlauf den unteren Rand der Seite passiert. Das folgende Beispiel zeigt, wie dies funktioniert. In unserem Controller haben wir eine Funktion zum Hinzufügen von Elementen zur Liste erstellt. Diese Elemente werden hinzugefügt, wenn eine Schriftrolle 10% des zuletzt geladenen Elements passiert. Dies wird so lange fortgesetzt, bis wir 30 geladene Elemente erreicht haben. Jedes Mal, wenn das Laden beendet ist,on-infinite wird ausgestrahlt scroll.infiniteScrollComplete Veranstaltung.

HTML Quelltext

<ion-list>
   <ion-item ng-repeat = "item in items" item = "item">Item {{ item.id }}</ion-item>
</ion-list>

<ion-infinite-scroll ng-if = "!noMoreItemsAvailable" on-infinite = "loadMore()" 
   distance = "10%"></ion-infinite-scroll>

Controller-Code

.controller('MyCtrl', function($scope) {
   $scope.items = [];
   $scope.noMoreItemsAvailable = false;
   
   $scope.loadMore = function() {
      $scope.items.push({ id: $scope.items.length}); 

      if ($scope.items.length == 30) {
         $scope.noMoreItemsAvailable = true;
      }
   
      $scope.$broadcast('scroll.infiniteScrollComplete');
   };
})

Andere Attribute können auch mit verwendet werden ion-infinite-scroll. Einige von ihnen sind in der folgenden Tabelle aufgeführt.

Bildlaufattribute

Attribut Art Einzelheiten
unendlich Ausdruck Was soll aufgerufen werden, wenn nach unten gescrollt wird?
Entfernung Zeichenfolge Der Abstand vom Boden, der benötigt wird, um einen unendlichen Ausdruck auszulösen.
Spinner Zeichenfolge Welcher Spinner sollte beim Laden angezeigt werden?
Sofortige Überprüfung Boolescher Wert Sollte 'on-infinite' aufgerufen werden, wenn der Bildschirm geladen wird

Scroll Delegate

Ionic bietet Delegierten die volle Kontrolle über die Bildlaufelemente. Es kann durch Injektion von a verwendet werden$ionicScrollDelegate Service für den Controller, und verwenden Sie dann die bereitgestellten Methoden.

Das folgende Beispiel zeigt eine scrollbare Liste von 20 Objekten.

HTML Quelltext

<div class = "list">
   <div class = "item">Item 1</div>
   <div class = "item">Item 2</div>
   <div class = "item">Item 3</div>
   <div class = "item">Item 4</div>
   <div class = "item">Item 5</div>
   <div class = "item">Item 6</div>
   <div class = "item">Item 7</div>
   <div class = "item">Item 8</div>
   <div class = "item">Item 9</div>
   <div class = "item">Item 10</div>
   <div class = "item">Item 11</div>
   <div class = "item">Item 12</div>
   <div class = "item">Item 13</div>
   <div class = "item">Item 14</div>
   <div class = "item">Item 15</div>
   <div class = "item">Item 16</div>
   <div class = "item">Item 17</div>
   <div class = "item">Item 18</div>
   <div class = "item">Item 19</div>
   <div class = "item">Item 20</div>
</div>

<button class = "button" ng-click = "scrollTop()">Scroll to Top!</button>

Controller-Code

.controller('DashCtrl', function($scope, $ionicScrollDelegate) {

   $scope.scrollTop = function() {
      $ionicScrollDelegate.scrollTop();
   };
})

Der obige Code erzeugt den folgenden Bildschirm:

Wenn wir auf die Schaltfläche tippen, wird der Bildlauf nach oben verschoben.

Jetzt werden wir alle durchgehen $ionicScrollDelegate Methoden.

Methoden delegieren

Methode Parameter Art Einzelheiten
scrollTop (Parameter) sollte animieren Boolescher Wert Sollte der Bildlauf animiert sein.
scrollBottom (Parameter) sollte animieren Boolescher Wert Sollte der Bildlauf animiert sein.
scrollTo (Parameter1, Parameter2, Parameter3) links, oben, sollte animieren Zahl, Zahl, ganze Zahl Die ersten beiden Parameter bestimmen den Wert des Versatzes der x- und y-Achse.
scrollBy (Parameter1, Parameter2, Parameter3) links, oben, sollte animieren Zahl, Zahl, ganze Zahl Die ersten beiden Parameter bestimmen den Wert des Versatzes der x- und y-Achse.
zoomTo (Parameter1, Parameter2, Parameter3, Parameter4) level, animieren, originLeft, originTop Zahl, Boolescher Wert, Zahl, Zahl level wird verwendet, um die Ebene zu bestimmen, auf die gezoomt werden soll. originLeft und originRight Koordinaten, wo das Zoomen stattfinden soll.
zoomBy (Parameter1, Parameter2, Parameter3, Parameter4) Faktor, animieren, originLeft, originTop Zahl, Boolescher Wert, Zahl, Zahl factor wird verwendet, um den Faktor zu bestimmen, um den gezoomt werden soll. originLeft und originRight Koordinaten, wo das Zoomen stattfinden soll.
getScrollPosition () /. /. Gibt ein Objekt mit zwei Nummern als Eigenschaften zurück: left und right. Diese Zahlen geben die Entfernung an, die der Benutzer von links bzw. von oben gescrollt hat.
anchorScroll (parameter1) sollte animieren Boolescher Wert Es wird zu dem Element mit der gleichen ID wie das gescrollt window.loaction.hash. Wenn dieses Element nicht vorhanden ist, wird es nach oben gescrollt.
freezeScroll (Parameter1) sollte einfrieren Boolescher Wert Dient zum Deaktivieren des Bildlaufs für einen bestimmten Bildlauf.
freezeAllScrolls (Parameter1) sollte einfrieren Boolescher Wert Wird verwendet, um das Scrollen für alle Schriftrollen in der App zu deaktivieren.
getScrollViews () /. Objekt Gibt das scrollView-Objekt zurück.
$ getByHandle (Parameter1) Griff Zeichenfolge Wird verwendet, um Methoden mit demselben Handle mit der jeweiligen Bildlaufansicht zu verbinden. $ionicScrollDelegate. $getByHandle('my-handle').scrollTop();