Ionic - JavaScript Scroll

L'elemento utilizzato per la manipolazione dello scorrimento nelle app ioniche è chiamato ion-scroll.

Utilizzando Scroll

I seguenti frammenti di codice creeranno contenitori scorrevoli e regoleranno i modelli di scorrimento. Innanzitutto, creeremo il nostro elemento HTML e aggiungeremo proprietà ad esso. Aggiungeremo →direction = "xy"per consentire lo scorrimento da ogni lato. Inoltre, imposteremo la larghezza e l'altezza dell'elemento scroll.

Codice HTML

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

Successivamente, aggiungeremo l'immagine della nostra mappa del mondo a div elemento, che abbiamo creato all'interno di ion-scroll e impostane la larghezza e l'altezza.

Codice CSS

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

Quando eseguiamo la nostra app, possiamo scorrere la mappa in ogni direzione. L'esempio seguente mostra la parte del Nord America della mappa.

Possiamo scorrere questa mappa fino a qualsiasi parte vogliamo. Scorriamolo per mostrare l'Asia.

Ci sono altri attributi che possono essere applicati a ion-scroll. Puoi controllarli nella tabella seguente.

Attributi di scorrimento

Attributo genere Dettagli
direzione corda Possibili direzioni della pergamena. Il valore predefinito èy
delegate-handle corda Utilizzato per l'identificazione dello scorrimento con $ionicScrollDelegate.
bloccaggio booleano Utilizzato per bloccare lo scorrimento in una direzione alla volta. Il valore predefinito è vero.
impaginazione booleano Utilizzato per determinare se il paging verrà utilizzato con lo scorrimento.
all'aggiornamento espressione Chiamato pull-to-refresh.
a scorrimento espressione Chiamato durante lo scorrimento.
scrollbar-x booleano Dovrebbe essere visualizzata la barra di scorrimento orizzontale. Il valore predefinito è vero.
barra di scorrimento-y corda Dovrebbe essere visualizzata la barra di scorrimento verticale. Il valore predefinito è vero.
zoom booleano Utilizzato per applicare lo zoom tramite pizzico.
min-zoom numero intero Valore di zoom minimo.
zoom massimo numero intero Valore di zoom massimo.
scrollbar-x booleano Utilizzato per abilitare il rimbalzo. Il valore predefinito su IOS è vero, su Android falso.

Scroll infinito

Uno scorrimento infinito viene utilizzato per attivare un comportamento quando lo scorrimento passa in fondo alla pagina. L'esempio seguente mostra come funziona. Nel nostro controller abbiamo creato una funzione per aggiungere elementi all'elenco. Questi elementi verranno aggiunti quando uno scorrimento supera il 10% dell'ultimo elemento caricato. Questo continuerà fino a quando non raggiungiamo 30 elementi caricati. Ogni volta che il caricamento è terminato,on-infinite trasmetterà scroll.infiniteScrollComplete evento.

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

Codice controller

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

Altri attributi possono essere utilizzati anche con ion-infinite-scroll. Alcuni di essi sono elencati nella tabella sottostante.

Attributi di scorrimento

Attributo genere Dettagli
infinito espressione Come dovrebbe essere chiamato quando si scorre verso il basso.
distanza corda La distanza dal fondo necessaria per innescare un'espressione infinita.
filatore corda Quale spinner deve essere mostrato durante il caricamento
controllo immediato Booleano Dovrebbe essere chiamato "on-infinite" quando viene caricato lo schermo

Delegato di scorrimento

Ionic offre delegato per il controllo completo degli elementi di scorrimento. Può essere utilizzato iniettando un$ionicScrollDelegate servizio al controller e quindi utilizzare i metodi forniti.

L'esempio seguente mostra un elenco scorrevole di 20 oggetti.

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

Codice controller

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

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

Il codice precedente produrrà la seguente schermata:

Quando tocchiamo il pulsante, lo scorrimento verrà spostato in alto.

Ora, esamineremo tutti i file $ionicScrollDelegate metodi.

Metodi delegati

Metodo Parametri genere Dettagli
scrollTop (parametro) shouldAnimate booleano Lo scorrimento dovrebbe essere animato.
scrollBottom (parametro) shouldAnimate booleano Lo scorrimento dovrebbe essere animato.
scrollTo (parametro1, parametro2, parametro3) a sinistra, in alto, dovrebbeAnimare numero, numero, intero I primi due parametri determinano il valore dell'offset degli assi xe y.
scrollBy (parametro1, parametro2, parametro3) a sinistra, in alto, dovrebbeAnimare numero, numero, intero I primi due parametri determinano il valore dell'offset degli assi xe y.
zoomTo (parametro1, parametro2, parametro3, parametro4) level, animate, originLeft, originTop numero, booleano, numero, numero level viene utilizzato per determinare il livello su cui eseguire lo zoom. originLeft e originRight coordinate in cui dovrebbe avvenire lo zoom.
zoomBy (parametro1, parametro2, parametro3, parametro4) factor, animate, originLeft, originTop numero, booleano, numero, numero factor viene utilizzato per determinare il fattore di cui eseguire lo zoom. originLeft e originRight coordinate in cui dovrebbe avvenire lo zoom.
getScrollPosition () / / Restituisce un oggetto con due numeri come proprietà: left e right. Questi numeri rappresentano la distanza percorsa dall'utente rispettivamente da sinistra e dall'alto.
anchorScroll (parametro1) shouldAnimate booleano Scorrerà fino all'elemento con lo stesso ID del file window.loaction.hash. Se questo elemento non esiste, scorrerà verso l'alto.
freezeScroll (parametro1) shouldFreeze booleano Utilizzato per disabilitare lo scorrimento per uno scorrimento particolare.
freezeAllScrolls (parametro1) shouldFreeze booleano Utilizzato per disabilitare lo scorrimento per tutti gli scorrimenti nell'app.
getScrollViews () / oggetto Restituisce l'oggetto scrollView.
$ getByHandle (parametro1) maniglia corda Utilizzato per collegare metodi a una particolare visualizzazione a scorrimento con lo stesso handle. $ionicScrollDelegate. $getByHandle('my-handle').scrollTop();