Ionic - Boîte de diapositives JavaScript

Une boîte de diapositive contient des pages qui peuvent être modifiées en faisant glisser l'écran de contenu.

Utilisation de Slide Box

L'utilisation de la boîte de diapositive est simple. Vous avez juste besoin d'ajouterion-slide-box en tant que conteneur et ion-slideavec la classe de boîte à l'intérieur de ce conteneur. Nous ajouterons de la hauteur et de la bordure à nos boîtes pour une meilleure visibilité.

Code 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;
}

La sortie ressemblera à celle illustrée dans la capture d'écran suivante -

Nous pouvons changer la boîte en faisant glisser le contenu vers la droite. Nous pouvons également faire glisser vers la gauche pour afficher la boîte précédente.

Quelques attributs qui peuvent être utilisés pour contrôler le comportement de la boîte de diapositive sont mentionnés dans le tableau suivant.

Méthodes de délégation

Attribut Type Détails
continue Booléen Devrait faire glisser la boîte en boucle lorsque la première ou la dernière boîte est atteinte.
lecture automatique Booléen La boîte de diapositive devrait glisser automatiquement.
intervalle entre les diapositives nombre Valeur de temps entre les changements de diapositives automatiques en millisecondes. La valeur par défaut est 4000.
afficher-pager Booléen Le téléavertisseur doit-il être visible.
clic sur pager expression Appelé lorsqu'un pager est mis sur écoute (si le pager est visible). $index est utilisé pour correspondre à différentes diapositives.
modifié sur la diapositive expression Appelé lorsque la diapositive est modifiée. $index est utilisé pour correspondre à différentes diapositives.
active-slide expression Utilisé comme modèle pour lier l'index de la diapositive actuelle.
délégué-handle chaîne Utilisé pour l'identification de la boîte à lames avec $ionicSlideBoxDelegate.

Délégué de la boîte à diapositives

le $ionicSlideBoxDelegateest un service utilisé pour contrôler toutes les boîtes de diapositives. Nous devons l'injecter dans le contrôleur.

Code du contrôleur

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

Code HTML

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

Le tableau suivant montre $ionicSlideBoxDelegate méthodes.

Méthodes de délégation

Méthode Paramètres Type Détails
slide (paramètre1, paramètre2) Accélérer nombre, nombre Paramètre to représente l'index vers lequel glisser. speed détermine la vitesse du changement en millisecondes.
enableSlide (paramètre1) shouldEnable booléen Utilisé pour émailler ou désactiver le glissement.
précédent (paramètre1) la vitesse nombre La valeur en millisecondes que le changement doit prendre.
Arrêtez() / / Utilisé pour arrêter le glissement.
début() / / Utilisé pour démarrer le glissement.
currentIndex () / nombre Renvoie l'index de la diapositive actuelle.
slidesCount () / nombre Renvoie le nombre total de diapositives.
$ getByHandle (paramètre1) manipuler chaîne Utilisé pour connecter des méthodes à la boîte de diapositive particulière avec la même poignée. $ionicSlideBoxDelegate. $getByHandle('my-handle').start();