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>