ionic 幻燈指令 ion-slide-box

學習要點：
1.幻燈片 : ion-slide-box 指令介紹
2. ion-slide-box : 屬性設置定制播放行為
3. ion-slide-box : 事件及變量
4. 腳本接口: $ionicSlideBoxDelegate

1.幻燈片 : ion-slide-box 指令介紹
ion-slide-box 可以做什么
1. 可以做啟動切換頁面
2. 可以做首頁幻燈
3. 可以做頁面左右滑動切換
Ionic 放在那個指令使用
主要放在 ion-view 中使用
幻燈片也是一種常見的 UI 表現(xiàn)方式，它從一組元素中選擇一個投射到屏幕可視區(qū)域，用戶
可以通過滑動方式（向左或向右）進行切換：

在 ionic 中，使用 ion-slide-box 指令聲明幻燈片元素，使用 ion-slide 指令聲明幻燈頁元素：
<ion-slide-box>
<ion-slide>...</ion-slide>
<ion-slide>...</ion-slide>
...
</ion-slide-box>

2.ion-slide-box : 屬性設置定制播放行為
指令 ion-slide-box 有一些可選的屬性可以定制其播放行為：
does-continue - 是否循環(huán)切換
你可能注意到， 剛才的示例中，開頭的幻燈頁只能向左滑動，最后的幻燈頁只能向右滑動。
將 does-continue 屬性值設為 true，就可以讓幻燈頁組首尾連接起來，循環(huán)切換。
auto-play - 是否自動播放

通過將 auto-play 屬性設置為 true，可以讓幻燈頁自動切換。切換的間隔默認是 4000ms，可
以 通過屬性 slide-interval 進行調(diào)整。
slide-interval - 自動播放的間隔時間，默認為 4000ms
show-pager - 是否顯示分頁器
分頁器用來指示幻燈頁的選中狀態(tài)，位于幻燈片的底部。 允許值為： true | false

3. ion-slide-box : 事件及變量
指令 ion-slide-box 提供了可選的用于事件監(jiān)聽的屬性：
pager-click - 分頁器點擊事件
pager-click 屬性應當設置為一個當前作用域上的函數(shù)調(diào)用表達式，這個函數(shù)將被 傳入被點
擊的分頁按鈕對應的幻燈頁序號： index
on-slide-changed - 幻燈頁切換事件
on-slide-changed 屬性應當設置為一個當前作用域上的函數(shù)調(diào)用表達式，這個函數(shù) 將被傳入
當前幻燈頁的序號： $index
active-slide - 當前幻燈頁索引

active-slide 屬性應當設置為一個當前作用域上的變量，當幻燈片切換時，這個變 量同步的
反應當前的幻燈頁索引號
4.腳本接口: $ionicSlideBoxDelegate

可以使用服務$ionicSlideBoxDelegate 在腳本中操作幻燈片對象：
update() - 重繪幻燈片
有時，比如當容器尺寸發(fā)生變化時，需要調(diào)用 update()方法重繪幻燈片。
slide(to[,speed]) - 切換到指定幻燈頁
參數(shù) to 表示切換的目標幻燈頁序號，參數(shù) speed 是可選的，表示以毫秒 為單位的切換時間
enableSlide([shouldEnable]) - 幻燈片使能
參數(shù) shouldEnable 的允許值為： true | false 。

previous() - 切換到前一張幻燈頁
next() - 切換到后一張幻燈頁
currentIndex() - 獲得當前幻燈頁的序號
slideCount() - 獲得全部幻燈頁的數(shù)量

交流QQ群：187269144 

QQ群2：438443293

QQ群3：248403526