使用ionic中ion-slide-box實現移動app輪播特效
H5混合式移動開發框架ionic，是使用angularJS的語法，加上大名鼎鼎的移動應用開發框架cordova的核心。它的特點是跨平臺、入門簡單、可以減少開發週期。實質上，ionic就是用製作網頁的技術來開發移動app。
下面使用ionic中ion-slide-box實現移動app輪播特效。
一、基本結構
其基本結構就是用ion-slide-box標籤包含若干個<ion-slide>標籤：
<ion-slide-box>
<ion-slide>
第一張圖片
</ion-slide>
<ion-slide>
第二張圖片
</ion-slide>
<ion-slide>
第三張圖片
</ion-slide>
……
</ion-slide-box>
二、ion-slide-box的API
|
屬性 |
型別 |
詳情 |
|
does-continue (可選) |
布林值 |
是否迴圈切換：幻燈頁預設只能向左滑動,最後的幻燈頁只能向右滑動。將does-continue屬性值設為true,就可以讓幻燈頁組首尾連線起來，迴圈切換。 |
|
slide-interval (可選) |
數字 |
自動播放的間隔時間,預設為4000毫秒。 |
|
show-pager (可選) |
布林值 |
否顯示分頁器分頁器用來指示幻燈頁的選中狀態，位於幻燈片的底部，預設為黑色的實心小圓 |
|
pager-click (可選) |
表示式 |
如果shou-pager為true，當點選頁面分頁器時，觸發該表示式，傳遞一個'索引'變數。 |
|
on-slide-changed (可選) |
表示式 |
當幻燈頁滑動時，觸發該表示式。傳遞一個'索引'變數。 |
|
active-slide (可選) |
表示式 |
根據下標值，指定選中的幻燈頁。 |
|
auto-play(可選) |
布林值 |
是否自動播放幻燈頁 |
三、$ionicSlideBoxDelegate介紹
可以使用$ionicSlideBoxDelegate控制所有的滑動框，常見方法如下：
|
方法名 |
引數/引數型別 |
詳情 |
|
slide(to, [speed]) |
number |
to:滑上指定的幻燈片的下標值 speed：滑動鎖花費的時間，單位為毫秒 |
|
previous([speed]) |
number |
speed:返回前一個幻燈片所花的時間，單位為毫秒。 |
|
next([speed]) |
number |
speed:跳到下一個幻燈片所花的時間，單位為毫秒。 |
|
stop() |
停止滑動 |
|
|
start() |
開始滑動 |
|
|
currentIndex() |
返回當前播放幻燈頁的下標值。 |
|
|
slidesCount() |
返回幻燈片總的片數 |
四、原始碼
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>使用ionic中ion-slide-box實現移動app輪播特效</title>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0,user-scalable=no,width=device-width" />
<link rel="stylesheet" href="css/ionic.css" />
<script type="text/javascript"src="js/ionic.bundle.min.js"></script>
<style>
img{
max-width:100%;
}
</style>
</head>
<body ng-controller="myController">
<ion-header-bar class="bar-positive">
<ion-title>
<h3>移動app輪播特效的製作</h3>
</ion-title>
</ion-header-bar>
<ion-content>
<ion-slide-box active-slide="model.activeIndex" does-continue="true" slide-interval="1000" auto-play="true" show-pager="true" pager-click="toSlideIndex(index)" on-tap="stopOrStart()">
<ion-slide>
<img src="img/1a.jpg" />
</ion-slide>
<ion-slide>
<img src="img/2a.jpg" />
</ion-slide>
<ion-slide>
<img src="img/3a.jpg" />
</ion-slide>
<ion-slide>
<img src="img/4a.jpg" />
</ion-slide>
<ion-slide>
<img src="img/5a.jpg" />
</ion-slide>
</ion-slide-box>
</ion-content>
<ion-footer-bar class="bar-positive"></ion-footer-bar>
<script>
angular.module("myApp", ['ionic'])
.controller("myController", function($scope, $ionicSlideBoxDelegate) {
$scope.model = {
activeIndex: "2",
};
/**
* 單擊分頁器，跳到指定的幻燈片
*/
$scope.toSlideIndex = function(index) {
$scope.model.activeIndex = index;
};
/**
* 第一次輕擊幻燈片，停止輪播
* 第二次輕擊幻燈片，開始輪播
* 依次迴圈
*/
$scope.even = 0;
$scope.stopOrStart = function() {
if($scope.even == 0) {
$ionicSlideBoxDelegate.stop();
$scope.even=1;
} else {
$ionicSlideBoxDelegate.start();
$scope.even=0;
}
}
});
</script>
</body>
</html>
五、提升
1、修改樣式
執行程式碼，在瀏覽器中點選F12，檢視具體的樣式，找到對應的樣式名，重寫ionic專案中的css就可以了，比如可以把分頁器的小圓心變為白色的。
2、非同步載入
如果網頁中的圖片地址是從資料庫獲取的，建議使用ajax，在ionic中，可以使用$http.get()方法非同步載入圖片，如果存在跨域問題，則可以使用$http.jsonp()方法。然後遍歷即可：
<ion-slide ng-repeat="m in imgs">
<img src="img/{{m.imgUrl}}" />
</ion-slide>
有時候會出現圖片無法加載出來，可以在在相應的controller檔案增加 $ionicSlideBoxDelegate.update()。$ionicSlideBoxDelegate.update(); 就是當容器尺寸發生變化時，需要呼叫update()方法重繪幻燈片，更新滑動框;另外一種解決方案就是用ng-if判斷遍歷的陣列是否為空，不為空時再用repeat遍歷該陣列即可：
<ion-slide-box active-slide="model.activeIndex" does-continue="true" auto-play="true" ng-if="imgs">
<ion-slide ng-repeat="m in imgs">
<img src="img/{{m.imgUrl}}" />
</ion-slide>
</ion-slide-box>
如果輪播至最後一個不輪播，可以在相應的controller檔案增加 $ionicSlideBoxDelegate.loop(true)。