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

输出将如下面的屏幕截图所示：

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

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

委托方法

属性	类型	详情
does-continue	布尔值	到达第一个或最后一个滑块时，滑块盒是否应循环。
auto-play	布尔值	滑块盒是否应自动滑动。
slide-interval	数字	自动滑动更改之间的时间值（毫秒）。默认值为 4000。
show-pager	布尔值	分页器是否可见。
pager-click	表达式	点击分页器时调用（如果分页器可见）。`$index` 用于匹配不同的滑块。
on-slide-changed	表达式	滑块更改时调用。`$index` 用于匹配不同的滑块。
active-slide	表达式	用作模型，将当前滑块索引绑定到。
delegate-handle	字符串	用于使用 `$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	数字, 数字	参数 `to` 表示要滑动的索引。`speed` 确定更改的速度（毫秒）。
enableSlide(parameter1)	shouldEnable	布尔值	用于启用或禁用滑动。
previous(parameter1)	speed	数字	更改所需的时间值（毫秒）。
stop()	/	/	用于停止滑动。
start()	/	/	用于开始滑动。
currentIndex()	/	数字	返回当前滑块的索引。
slidesCount()	/	数字	返回滑块的总数。
$getByHandle(parameter1)	handle	字符串	用于将方法连接到具有相同 handle 的特定滑块盒。`$ionicSlideBoxDelegate. $getByHandle('my-handle').start();`

打印页面