Ionic - JavaScript Scroll

Element używany do manipulacji przewijaniem w aplikacjach jonowych nosi nazwę ion-scroll.

Korzystanie z przewijania

Poniższe fragmenty kodu utworzą przewijalne kontenery i dostosują wzorce przewijania. Najpierw utworzymy nasz element HTML i dodamy do niego właściwości. Dodamy →direction = "xy"aby umożliwić przewijanie w każdą stronę. Ustawimy również szerokość i wysokość elementu scroll.

Kod HTML

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

Następnie dodamy obraz naszej mapy świata do div element, który stworzyliśmy wewnątrz ion-scroll i ustaw jego szerokość i wysokość.

Kod CSS

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

Kiedy uruchamiamy naszą aplikację, możemy przewijać mapę w każdym kierunku. Poniższy przykład przedstawia część mapy w Ameryce Północnej.

Możemy przewinąć tę mapę do dowolnej części. Przewińmy to, aby pokazać Azję.

Istnieją inne atrybuty, które można zastosować do ion-scroll. Możesz je sprawdzić w poniższej tabeli.

Przewiń atrybuty

Atrybut Rodzaj Detale
kierunek strunowy Możliwe kierunki przewijania. Wartość domyślna toy
uchwyt delegata strunowy Służy do identyfikacji zwoju za pomocą $ionicScrollDelegate.
zamykający boolean Służy do blokowania przewijania w jednym kierunku na raz. Wartość domyślna to prawda.
stronicowanie boolean Służy do określania, czy stronicowanie będzie używane z przewijaniem.
odświeżanie wyrażenie Wzywa się „pull-to-refresh”.
on-scroll wyrażenie Wywoływane podczas przewijania.
scrollbar-x boolean Czy powinien być wyświetlany poziomy pasek przewijania. Wartość domyślna to prawda.
scrollbar-y strunowy Czy powinien być wyświetlany pionowy pasek przewijania. Wartość domyślna to prawda.
powiększanie boolean Służy do powiększania przez szczypanie.
min-zoom liczba całkowita Minimalna wartość powiększenia.
maksymalny zoom liczba całkowita Maksymalna wartość powiększenia.
scrollbar-x boolean Służy do włączania odbijania. Wartość domyślna w systemie IOS to true, w systemie Android false.

Nieskończone przewijania

Nieskończone przewijanie jest używane do wywoływania pewnych zachowań, gdy przewijanie przechodzi do dołu strony. Poniższy przykład pokazuje, jak to działa. W naszym kontrolerze stworzyliśmy funkcję dodawania pozycji do listy. Te elementy zostaną dodane, gdy zwój przejdzie 10% ostatniego załadowanego elementu. Będzie to trwało, dopóki nie trafimy 30 załadowanych elementów. Za każdym razem, gdy ładowanie jest zakończone,on-infinite będzie nadawać scroll.infiniteScrollComplete zdarzenie.

Kod HTML

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

Kod kontrolera

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

Inne atrybuty mogą być również używane z ion-infinite-scroll. Niektóre z nich wymieniono w poniższej tabeli.

Przewiń atrybuty

Atrybut Rodzaj Detale
nieskończony wyrażenie Co należy nazwać po przewinięciu do dołu.
dystans strunowy Odległość od dna potrzebna do wywołania nieskończonej ekspresji.
prządka strunowy Jaki spinner powinien być pokazany podczas ładowania
natychmiastowa kontrola Boolean Czy powinno być wywoływane „on-infinite”, gdy screen jest ładowany

Przewiń delegata

Ionic oferuje delegatowi pełną kontrolę nad elementami przewijania. Można go użyć poprzez wstrzyknięcie$ionicScrollDelegate service do kontrolera, a następnie użyj dostarczonych metod.

Poniższy przykład przedstawia przewijalną listę 20 obiektów.

Kod HTML

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

Kod kontrolera

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

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

Powyższy kod wygeneruje następujący ekran -

Kiedy stukniemy w przycisk, przewiń zostanie przeniesiony na górę.

Teraz przejdziemy przez wszystkie $ionicScrollDelegate metody.

Metody delegowania

metoda Parametry Rodzaj Detale
scrollTop (parametr) shouldAnimate boolean Powinien być animowany.
scrollBottom (parametr) shouldAnimate boolean Powinien być animowany.
scrollTo (parametr1, parametr2, parametr3) left, top, shouldAnimate liczba, liczba, liczba całkowita Pierwsze dwa parametry określają wartość przesunięcia osi xi y.
scrollBy (parametr1, parametr2, parametr3) left, top, shouldAnimate liczba, liczba, liczba całkowita Pierwsze dwa parametry określają wartość przesunięcia osi xi y.
zoomTo (parametr1, parametr2, parametr3, parametr4) level, animate, originLeft, originTop liczba, wartość logiczna, liczba, liczba level służy do określenia poziomu powiększenia. originLeft i originRight współrzędne, w których powinno nastąpić powiększenie.
zoomBy (parametr1, parametr2, parametr3, parametr4) czynnik, animacja, pochodzenieLeft, pochodzenieTop liczba, wartość logiczna, liczba, liczba factor służy do określenia współczynnika powiększenia. originLeft i originRight współrzędne, w których powinno nastąpić powiększenie.
getScrollPosition () / / Zwraca obiekt z dwoma liczbami jako właściwościami: left i right. Liczby te reprezentują odległość, którą użytkownik przewinął odpowiednio od lewej i od góry.
anchorScroll (parametr1) shouldAnimate boolean Przewinie do elementu o tym samym identyfikatorze co plik window.loaction.hash. Jeśli ten element nie istnieje, zostanie przewinięty do góry.
freezeScroll (parametr1) shouldFreeze boolean Służy do wyłączania przewijania dla określonego zwoju.
freezeAllScrolls (parametr1) shouldFreeze boolean Służy do wyłączania przewijania wszystkich zwojów w aplikacji.
getScrollViews () / obiekt Zwraca obiekt scrollView.
$ getByHandle (parametr1) uchwyt strunowy Służy do łączenia metod z określonym widokiem przewijania za pomocą tego samego uchwytu. $ionicScrollDelegate. $getByHandle('my-handle').scrollTop();