Ионный - JavaScript слайд-бокс

Поле слайда содержит страницы, которые можно изменить, проводя пальцем по экрану содержимого.

Использование слайд-бокса

Использование слайд-бокса простое. Вам просто нужно добавитьion-slide-box как контейнер и ion-slideс классом коробки внутри этого контейнера. Мы добавим нашим прямоугольникам высоту и границу для лучшей видимости.

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

Результат будет выглядеть, как показано на следующем снимке экрана -

Мы можем изменить поле, перетащив содержимое вправо. Мы также можем перетащить влево, чтобы показать предыдущее поле.

В следующей таблице указаны несколько атрибутов, которые можно использовать для управления поведением ползунка.

Методы делегата

Атрибут	Тип	Детали
продолжает	Булево	Должен сдвигаться петля коробки при достижении первой или последней рамки.
Автовоспроизведение	Булево	Если поле слайда автоматически сдвинется.
слайд-интервал	количество	Значение времени между автоматическими изменениями слайдов в миллисекундах. Значение по умолчанию 4000.
шоу-пейджер	Булево	Должен быть виден пейджер.
щелчок по пейджеру	выражение	Вызывается при нажатии на пейджер (если пейджер виден). $index используется для сопоставления с разными слайдами.
на слайде изменено	выражение	Вызывается при смене слайда. $index используется для сопоставления с разными слайдами.
активный слайд	выражение	Используется в качестве модели для привязки текущего индекса слайда.
дескриптор делегата	строка	Используется для идентификации слайд-бокса с $ionicSlideBoxDelegate.

Slide Box Delegate

В $ionicSlideBoxDelegateэто сервис, используемый для управления всеми полями слайдов. Нам нужно ввести его в контроллер.

Код контроллера

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

HTML код

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

В следующей таблице показаны $ionicSlideBoxDelegate методы.

Методы делегата

Метод	Параметры	Тип	Детали
слайд (параметр1, параметр2)	разгоняться, набирать скорость	число, число	Параметр to представляет индекс, к которому нужно перейти. speed определяет, насколько быстро происходит изменение в миллисекундах.
enableSlide (параметр1)	shouldEnable	логический	Используется для включения или отключения скольжения.
предыдущий (параметр1)	скорость	количество	Значение в миллисекундах, которое должно занять изменение.
стоп()	/	/	Используется для остановки скольжения.
Начало()	/	/	Используется для начала скольжения.
currentIndex ()	/	количество	Возвращает индекс текущего слайда.
slidesCount ()	/	количество	Возвращает общее количество слайдов.
$ getByHandle (параметр1)	справиться	строка	Используется для подключения методов к определенному блоку слайдов с тем же дескриптором. $ionicSlideBoxDelegate. $getByHandle('my-handle').start();