Ionic - JavaScript 滑塊盒

滑塊盒包含可以透過滑動內容螢幕更改的頁面。

使用滑塊盒

滑塊盒的使用很簡單。你只需要新增 `ion-slide-box` 作為容器，並在該容器內新增帶有 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;
}

輸出將如下面的螢幕截圖所示：

我們可以透過將內容向右拖動來更改滑塊。我們也可以向左拖動以顯示上一個滑塊。

下表列出了一些可用於控制滑塊盒行為的屬性。

委託方法

滑塊盒委託

`$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` 方法。

委託方法