# ionic 滑動框
## ion-slide-box
滑動框是一個包含多頁容器的組件,每頁滑動或拖動切換:
效果圖如下:

### 用法
```
<ion-slide-box on-slide-changed="slideHasChanged($index)">
<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>
<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(可選)`:`表達式`
將模型綁定到當前滑動框。
## 實例
### HTML 代碼
```
<ion-slide-box active-slide="myActiveSlide">
<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>
<div class="box pink"><h1>PINK</h1></div>
</ion-slide>
</ion-slide-box>
```
### CSS 代碼
```
.slider {
height: 100%;
}
.slider-slide {
padding-top: 80px;
color: #000;
background-color: #fff;
text-align: center;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
.blue {
background-color: blue;
}
.yellow {
background-color: yellow;
}
.pink {
background-color: pink;
}
```
### JavaScript 代碼
```
angular.module('ionicApp', ['ionic'])
.controller('SlideController', function($scope) {
$scope.myActiveSlide = 1;
})
```
- ionic 入門
- ionic 簡介
- ionic 安裝
- ionic 創建 APP
- ionic CSS
- ionic 頭部與底部
- ionic 按鈕
- ionic 列表
- ionic 卡片
- ionic 表單和輸入框
- ionic Toggle(切換開關)
- ionic 單選框
- ionic Range
- ionic select
- ionic tab(選項卡)
- ionic 網格(Grid)
- ionic 顏色
- ionic icon(圖標)
- ionic JavaScript
- ionic 上拉菜單(ActionSheet)
- ionic 背景層
- ionic 下拉刷新
- ionic 復選框
- ionic 單選框操作
- ionic 切換開關操作
- ionic 手勢事件
- ionic 頭部和底部
- ionic 列表操作
- ionic 加載動作
- ionic 模型
- ionic 導航
- ionic 平臺
- ionic 浮動框
- ionic 對話框
- ionic 滾動條
- ionic 側欄菜單
- ionic 滑動框
- ionic 加載動畫
- ionic 選項卡欄操作