使用ionic中ion-slide-box实现移动app轮播特效

最新推荐文章于 2021-04-11 09:40:43 发布

fullStackChenZF

最新推荐文章于 2021-04-11 09:40:43 发布

阅读量5.6k

点赞数 5

分类专栏：前端 H5混合式移动开发文章标签：移动应用开发移动开发 app angularjs

本文链接：https://blog.csdn.net/fullStackChenZF/article/details/60602888

版权

前端同时被 2 个专栏收录

16 篇文章

订阅专栏

H5混合式移动开发

3 篇文章

订阅专栏

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>

<head>

<title>使用ionic中ion-slide-box实现移动app轮播特效</title>

<style>

img{

max-width:100%;

}

</style>

</head>

<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>

</ion-slide>

<ion-slide>

</ion-slide>

<ion-slide>

</ion-slide>

<ion-slide>

</ion-slide>

<ion-slide>

</ion-slide>

</ion-slide-box>

</ion-content>

<ion-footer-bar class="bar-positive"></ion-footer-bar>

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">

</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">

</ion-slide>

</ion-slide-box>

如果轮播至最后一个不轮播，可以在相应的controller文件增加 $ionicSlideBoxDelegate.loop(true)。