Ionic幻燈片

1. 簡介

ionic的幻燈片（滑動塊）主要由ionic-slide-box指令完成，使用幻燈片，我們可以做啓動App時的滑動畫面，也可實現頁面的左右滑動切換。在ionic中，我們使用ion-slide-box指令來聲明幻燈片元素，使用ion-slide指令聲明幻燈頁元素。

2. ion-slide-box屬性

• does-continue
  值爲布爾值，設置是否循環播放，即到最後一頁幻燈頁的時候可以向左滑動到第一頁。
• auto-play
  值爲布爾值，設置是否自動播放，默認頁面切換的間隔4000ms，可以通過屬性slide-interval調整。
• slide-interval
  值是一個數字，用來設置自動播放的間隔時間，單位爲ms，該屬性只有在auto-play爲true下才有意義。
• show-pager
  值是布爾值，用來設置是否顯示分頁器，分頁器是用來指示幻燈片的數量及當前幻燈片的選中狀態的。

3. ion-slide-box

• pager-click
  分頁器點擊事件，該項要求show-pager爲true，該屬性值爲一個當前作用域上的函數表達式，這個函數將被傳入被點擊的分頁按鈕對應的幻燈頁序號（從0開始）。下面是一個點擊對應的分頁按鈕跳到對應的分頁的代碼。這裏用到了腳本接口，即服務$ionicSlideBoxDelegate。

<ion-slide-box pager-click="go(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>
var app = angular.module("myApp",['ionic']);
app.controller("myController", function 
    ($scope,$ionicSlideBoxDelegate) {
    $scope.go = function(index) {
        console.log(index);
        $ionicSlideBoxDelegate.slide(index);
    }
});

• on-slide-changed 屬性同樣是一個當前作用域的函數表達式，會傳遞一個當前幻燈頁序號（不是滑動前的序號，是滑動後的序號）index參數。
• active-slide
  屬性是一個當前作用域的變量，這個變量會同步當前幻燈頁的索引號，當前索引頁發生變化會導致變量值會發生變化，變量值變化也會導致當前索引也發生變化（用這個來跳轉頁面不如slide方法，因爲該方法還可以指定切換時間），下面是一個將當前幻燈頁索引顯示出來的例子。

<div class="bar bar-header dark-bg">
    <h1 class="title">{{"現在所處的頁面："+index}}</h1>
</div>
<div class="content scroll-content has-header">
    <ion-view>
        <ion-slide-box active-slide="index">
            <ion-slide>
                <div class="box positive-bg"><h1>BLUE</h1></div>
            </ion-slide>
            <ion-slide>
                <div class="box energized-bg"><h1>YELLOW</h1></div>
            </ion-slide>
            <ion-slide>
                <div class="box balanced-bg"><h1>GREEN</h1></div>
            </ion-slide>
        </ion-slide-box>
    </ion-view>
</div>
<script>
var app = angular.module("myApp",['ionic']);
app.controller("myController", function ($scope,$ionicSlideBoxDelegate) {
    $scope.index = 0;
});
</script>

• delegatehandle
  值爲字符串，創建一個句柄給$ionicSlideBoxDelegate使用。

4.$ionicSlideBoxDelegate服務

• update()
  重新繪製幻燈片。
• slide(to,[speed])
  第一個參數to是必須的，代表着要滑動到的幻燈頁的索引，第二個參數speed是可選的，表示以毫秒爲單位的切換時間。
• previous()
  切換到前一張幻燈頁。
• next()
  切換到後一張幻燈頁。
• currentIndex()
  獲得當前幻燈頁的序號。
• slideCount()
  獲得幻燈頁的數量。
• stop()
  停止幻燈頁的滑動，如果要繼續滑動，要顯示的調用start()。
• start()
  在stop()調用後可以調用該方法使幻燈片繼續滑動。
• $getByHandle(handle)
  handle是個字符串，此方法能夠讓我們操縱具體滑動塊實例。如下面的代碼，當有多個滑動塊時，如果不能獲得對應標識的滑動塊再操作，那麼操作將會適用到所有滑動塊上。

<ion-view>
    <ion-slide-box delegate-handle="slide-box1" pager-click="go(index)">
        <ion-slide>
            <div class="box positive-bg"><h1>BLUE</h1></div>
        </ion-slide>
        <ion-slide>
            <div class="box energized-bg"><h1>YELLOW</h1></div>
        </ion-slide>
        <ion-slide>
            <div class="box balanced-bg"><h1>GREEN</h1></div>
        </ion-slide>
    </ion-slide-box>
    <ion-slide-box  delegate-handle="slide-box2" >
        <ion-slide>
            <div class="box positive-bg"><h1>BLUE</h1></div>
        </ion-slide>
        <ion-slide>
            <div class="box energized-bg"><h1>YELLOW</h1></div>
        </ion-slide>
        <ion-slide>
            <div class="box balanced-bg"><h1>GREEN</h1></div>
        </ion-slide>
    </ion-slide-box>
</ion-view>
<script>
var app = angular.module("myApp",['ionic']);
app.controller("myController", function
    ($scope,$ionicSlideBoxDelegate) {
    $scope.go = function (index) {
        $ionicSlideBoxDelegate.slide(index); //點擊第一個分頁器按鈕，兩個頁面都會跳轉
        /*如果用這條指令則只有一個頁面會跳轉
        $ionicSlideBoxDelegate.getByHandler('slide-box1').slide(index);  */
    };
});
</script>