Ionic-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.

슬라이드 상자 델리게이트

그만큼 $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 (parameter1) shouldEnable 부울 슬라이딩을 활성화하거나 비활성화하는 데 사용됩니다.
이전 (매개 변수 1) 속도 번호 변경해야하는 값 (밀리 초)입니다.
중지() / / 슬라이딩을 중지하는 데 사용됩니다.
스타트() / / 슬라이딩을 시작하는 데 사용됩니다.
currentIndex () / 번호 현재 슬라이드의 인덱스를 반환합니다.
slidesCount () / 번호 총 슬라이드 수를 반환합니다.
$ getByHandle (매개 변수 1) 핸들 동일한 핸들을 사용하여 메서드를 특정 슬라이드 상자에 연결하는 데 사용됩니다. $ionicSlideBoxDelegate. $getByHandle('my-handle').start();