ion-slide-box

授权: $ionicSlideBoxDelegate

滑动框是一个包含多页容器的组件，每页滑动或拖动切换：

SlideBox

用法

<ion-slide-box>
  <ion-slide>
    <div class="box blue"><h1>BLUE</h1></div>
  </ion-slide>
  <ion-slide>
    <div class="box yellow"><h1>YELLOW</h1></div>
  </ion-slide>
  <ion-slide on-slide-changed="slideHasChanged(index)">
    <div class="box pink"><h1>PINK</h1></div>
  </ion-slide>
</ion-slide-box>

API

属性	类型	详情
delegate-handle(可选)	`字符串`	该句柄用`$ionicSlideBoxDelegate`来标识这个滑动框。
does-continue(可选)	`布尔值`	滑动框是否自动滑动。
slide-interval(可选)	`数字`	等待多少毫秒开始滑动（如果继续则为true）。默认为4000。
show-pager(可选)	`布尔值`	滑动框的页面是否显示。
pager-click(可选)	`表达式`	当点击页面时，触发该表达式（如果shou-pager为true）。传递一个'索引'变量。
on-slide-changed(可选)	`表达式`	当滑动时，触发该表达式。传递一个'索引'变量。
active-slide(可选)	`表达式`	将模型绑定到当前滑动框。

$ionicSlideBoxDelegate

授权控制ionSlideBox指令。

当$ionicSlideBoxDelegate服务控制所有滑动框时触发该方法。用 $getByHandle方法控制特定的滑动框实例。

用法

<body ng-controller="MyCtrl">
  <ion-slide-box>
    <ion-slide>
      <div class="box blue">
        <button ng-click="nextSlide()">下一个滑块!</button>
      </div>
    </ion-slide>
    <ion-slide>
      <div class="box red">
        滑块 2!
      </div>
    </ion-slide>
  </ion-slide-box>
</body>

function MyCtrl($scope, $ionicSlideBoxDelegate) {
  $scope.nextSlide = function() {
    $ionicSlideBoxDelegate.next();
  }
}

方法

`update()`

更新滑动框（例如，用带有ng-repeat的Angular，调整它里面的元素）。

`slide(to, [speed])`

参数	类型	详情
to	`数字`	滑动的索引。
speed(可选)	`数字`	滑动切换的毫秒数。

`enableSlide([shouldEnable])`

参数	类型	详情
shouldEnable(可选)	`布尔值`	是否启用滑动框的滑动功能。

返回: 布尔值 是否启用滑动。

`previous()`

跳转到上一个滑块。如果在开始滑块，就循环。

`next()`

跳转到下一个滑块。如果在结尾就循环。

`stop()`

停止滑动。滑动框将不会再被滑动，直到再次启用。

`currentIndex()`

返回: 当前滑块的索引数值。

`slidesCount()`

返回: 当前滑块的数目。

`$getByHandle(handle)`

参数	类型	详情
handle	`字符串`

返回: delegateInstance一个只控制带有delegate-handle的ionSlideBox指令的授权实例来匹配给定句柄。

例如: $ionicSlideBoxDelegate.$getByHandle('my-handle').stop();