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

输出将如以下屏幕截图所示 −

我们可以通过将内容拖到右侧来更改框。我们也可以向左拖动以显示前一个框。

下表列出了一些可用于控制滑动框行为的属性。

委托方法

幻灯片框委托

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

委托方法