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