Ionic JavaScript幻灯片盒

幻灯片框包含可以通过滑动内容屏幕进行更改的页面。

使用幻灯片盒

滑盖盒的使用很简单。您只需要将 ion-slide-box 添加为容器，并在该容器内添加盒类的 Ionic滑动 。我们将为箱子增加高度和边框，以提高可视性。

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

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

IonicJavascript幻灯片盒1

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

IonicJavascript幻灯片盒2

下表中提到了一些可用于控制幻灯片行为的属性。

代表方法

属性 类型 详细
does-continue Boolean 当达到第一个或最后一个框时，应该滑动框。
auto-play Boolean 滑动框应自动滑动。
slide-interval number 自动幻灯片之间的时间值以毫秒为单位。默认值为4000。
show-pager Boolean pager 可见
pager-click expression 轻触pager时调用（如果pager可见）。$index用于匹配不同的幻灯片。
on-slide-changed expression 更改幻灯片时调用。$index用于匹配不同的幻灯片。
active-slide expression 用作将当前幻灯片索引绑定到的模型。
delegate-handle string 用于使用$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 方法。

代表方法

方法 参数 类型 详细
slide(parameter1, parameter2) to, speed number, number 参数to表示要滑动到的索引。speed决定了以毫秒为单位的变化速度。
enableSlide(parameter1) shouldEnable boolean 用于启用或禁用滑动。
previous(parameter1) speed number 更改应采用的毫秒值。
stop() / / 用于停止滑动。
start() / / 用于开始滑动。
currentIndex() / number 返回当前幻灯片的索引。
slidesCount() / number 返回幻灯片的总数。
$getByHandle(parameter1) handle string

用于将方法连接到具有相同句柄的特定幻灯片框。

$ionicSlideBoxDelegate.$getByHandle ('my-handle').start();