Ionic - JavaScript Slide Box

Pole slajdu zawiera strony, które można zmienić, przesuwając ekran zawartości.

Korzystanie z pola slajdów

Użycie pudełka do przesuwania jest proste. Musisz tylko dodaćion-slide-box jako pojemnik i ion-slidez klasą box wewnątrz tego kontenera. Dodamy wysokość i obramowanie do naszych pudełek dla lepszej widoczności.

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

Dane wyjściowe będą wyglądać tak, jak pokazano na poniższym zrzucie ekranu -

Możemy zmienić ramkę, przeciągając zawartość w prawo. Możemy również przeciągnąć w lewo, aby wyświetlić poprzednie pole.

W poniższej tabeli wymieniono kilka atrybutów, których można użyć do kontrolowania zachowania slajdu.

Metody delegowania

Atrybut Rodzaj Detale
nie kontynuuje Boolean Powinien przesuwać się pętli po osiągnięciu pierwszego lub ostatniego pudełka.
Automatyczne odtwarzanie Boolean Powinien przesuwać się automatycznie.
interwał slajdów numer Wartość czasu między automatycznymi zmianami slajdu w milisekundach. Wartość domyślna to 4000.
show-pager Boolean Powinien być widoczny pager.
kliknięcie pagera wyrażenie Wywoływane po dotknięciu pagera (jeśli widoczny jest pager). $index służy do dopasowania do różnych slajdów.
zmieniony na slajdach wyrażenie Wywoływane po zmianie slajdu. $index służy do dopasowania do różnych slajdów.
aktywny slajd wyrażenie Używany jako model do powiązania bieżącego indeksu slajdu.
uchwyt delegata strunowy Służy do identyfikacji pudełka wsuwanego za pomocą $ionicSlideBoxDelegate.

Delegat ze skrzynki slajdów

Plik $ionicSlideBoxDelegateto usługa służąca do kontroli wszystkich pudełek slajdów. Musimy wstrzyknąć to do kontrolera.

Kod kontrolera

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

Kod HTML

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

Poniższa tabela pokazuje $ionicSlideBoxDelegate metody.

Metody delegowania

metoda Parametry Rodzaj Detale
slide (parametr1, parametr2) przyspieszyć liczba, liczba Parametr to reprezentuje indeks do przesuwania. speed określa, jak szybka jest zmiana w milisekundach.
enableSlide (parametr1) shouldEnable boolean Służy do emaliowania lub wyłączania przesuwania.
poprzedni (parametr1) prędkość numer Wartość w milisekundach, jaką powinna przyjąć zmiana.
zatrzymać() / / Służy do zatrzymywania ślizgu.
początek() / / Służy do rozpoczęcia przesuwania.
currentIndex () / numer Zwraca indeks aktualnego slajdu.
slidesCount () / numer Zwraca całkowitą liczbę slajdów.
$ getByHandle (parametr1) uchwyt strunowy Służy do łączenia metod z konkretnym pudełkiem przesuwnym z tym samym uchwytem. $ionicSlideBoxDelegate. $getByHandle('my-handle').start();