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

输出将如下图所示 -

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

下表提到了一些可用于控制滑动框Behave的属性。

委托方法

滑动框委托

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

委托方法