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();