Ionic - JavaScript Slide Box

Una casella Diapositiva contiene pagine che possono essere modificate scorrendo la schermata del contenuto.

Utilizzando Slide Box

L'utilizzo della scatola delle diapositive è semplice. Devi solo aggiungereion-slide-box come contenitore e ion-slidecon la classe box all'interno di quel contenitore. Aggiungeremo altezza e bordo alle nostre scatole per una migliore visibilità.

Codice HTML

<ion-slide-box>

   <ion-slide>
      <div class = "box box1">
         <h1>Box 1</h1>
      </div>
   </ion-slide>

   <ion-slide>
      <div class = "box box2">
         <h1>Box 2</h1>
      </div>
   </ion-slide>

   <ion-slide>
      <div class = "box box3">
         <h1>Box 3</h1>
      </div>
   </ion-slide>

</ion-slide-box>

.box1, box2, box3 {
   height: 300px;
   border: 2px solid blue;
}

L'output apparirà come mostrato nello screenshot seguente:

Possiamo cambiare la casella trascinando il contenuto a destra. Possiamo anche trascinare a sinistra per mostrare la casella precedente.

Nella tabella seguente sono menzionati alcuni attributi che possono essere utilizzati per controllare il comportamento del riquadro diapositiva.

Metodi delegati

Attributo genere Dettagli
continua Booleano Deve scorrere la casella in loop quando viene raggiunta la prima o l'ultima casella.
riproduzione automatica Booleano La scatola dovrebbe scorrere automaticamente.
intervallo di diapositive numero Valore di tempo tra le modifiche automatiche della diapositiva in millisecondi. Il valore predefinito è 4000.
show-pager Booleano Dovrebbe essere visibile il cercapersone.
clic sul cercapersone espressione Chiamato quando viene toccato un cercapersone (se è visibile). $index viene utilizzato per abbinare diverse diapositive.
sulla diapositiva modificata espressione Chiamato quando viene modificata la diapositiva. $index viene utilizzato per abbinare diverse diapositive.
diapositiva attiva espressione Utilizzato come modello a cui associare l'indice della diapositiva corrente.
delegate-handle corda Utilizzato per l'identificazione della scatola dei vetrini con $ionicSlideBoxDelegate.

Delegato di Slide Box

Il $ionicSlideBoxDelegateè un servizio utilizzato per controllare tutte le caselle di diapositive. Dobbiamo iniettarlo al controller.

Codice controller

.controller('MyCtrl', function($scope, $ionicSlideBoxDelegate) {
   $scope.nextSlide = function() {
      $ionicSlideBoxDelegate.next();
   }
})

Codice HTML

<button class = "button button-icon icon ion-navicon" ng-click = "nextSlide()"></button>

La tabella seguente mostra $ionicSlideBoxDelegate metodi.

Metodi delegati

Metodo Parametri genere Dettagli
slide (parametro1, parametro2) a, velocità numero, numero Parametro to rappresenta l'indice a cui scorrere. speed determina la velocità della modifica in millisecondi.
enableSlide (parametro1) shouldEnable booleano Utilizzato per enambling o disabilitare lo scorrimento.
precedente (parametro1) velocità numero Il valore in millisecondi che dovrebbe assumere la modifica.
fermare() / / Utilizzato per fermare lo scorrimento.
inizio() / / Utilizzato per avviare lo scorrimento.
currentIndex () / numero Restituisce l'indice della diapositiva corrente.
slidesCount () / numero Restituisce il numero totale di diapositive.
$ getByHandle (parametro1) maniglia corda Utilizzato per collegare i metodi a una particolare scatola di diapositive con la stessa maniglia. $ionicSlideBoxDelegate. $getByHandle('my-handle').start();