ionic实现轮播

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

xy8199

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

阅读量1.4k

点赞数

分类专栏： JavaScript 文章标签： ionic

本文链接：https://blog.csdn.net/xy8199/article/details/78276276

版权

JavaScript 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

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">进入&gt;&gt;</button>
        </div>
    </ion-slide>
</ion-slide-box>
</body>
</html>

xy8199

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
ionic实现轮播

H5混合式移动开发框架ionic，是使用angularJS的语法，加上大名鼎鼎的移动应用开发框架cordova的核心。它的特点是跨平台、入门简单、可以减少开发周期。实质上，ionic就是用制作网页的技术来开发移动app。下面使用ionic中ion-slide-box实现移动app轮播特效。一、基本结构其基本结构就是用ion-slide-box标签包含若干个标签：
复制链接

扫一扫