您的位置：首页 > 其它

ionic实现轮播

2017-10-18 18:47 260 查看

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>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="../lib/css/ionic.css" rel="stylesheet"/>
<script type="text/javascript" src="../lib/js/ionic.bundle.js"></script>
<title>滑动框</title>
<style type="text/css">
.box img {
width: 100%;
height: 100%;
}

.box button {
position: fixed;
bottom: 4.8rem;
left: 50%;
transform: translateX(-50%);
}
</style>
<script type="text/javascript">
var app = angular.module("Demo3App", ["ionic"]);
</script>
</head>
<body ng-app="Demo3App">
<ion-slide-box on-slide-changed="slideHasChanged($index)">
<ion-slide>
<div class="box">
<img src="img/page-01.jpg"/>
</div>
</ion-slide>
<ion-slide>
<div class="box">
<img src="img/page-02.jpg"/>
</div>
</ion-slide>
<ion-slide>
<div class="box">
<img src="img/page-03.jpg"/>
<button class="button button-assertive">进入>></button>
</div>
</ion-slide>
</ion-slide-box>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： ionic

相关文章推荐

新的分享

章节导航