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