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)。
来源：CSDN
作者：fullStackChenZF
链接：https://blog.csdn.net/fullStackChenZF/article/details/60602888