ionic实现轮播

待我称王封你为后i 2022-06-07 10:39 200阅读 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**

<table style="border-collapse:collapse; border-spacing:0px; max-width:100%; color:rgb(69,69,69); font-family:&quot;PingFang SC&quot;,&quot;Microsoft YaHei&quot;,SimHei,Arial,SimSun"> 
 <tbody style=""> 
 <tr style=""> 
 <td style="background:rgb(229,229,229)"> 属性 </td> 
 <td style="background:rgb(229,229,229)"> 类型 </td> 
 <td style="background:rgb(229,229,229)"> 详情 </td> 
 </tr> 
 <tr style=""> 
 <td style=""> does-continue (可选) </td> 
 <td style=""> 布尔值 </td> 
 <td style=""> 是否循环切换：幻灯页默认只能向左滑动,最后的幻灯页只能向右滑动。将does-continue属性值设为true,就可以让幻灯页组首尾连接起来，循环切换。 </td> 
 </tr> 
 <tr style=""> 
 <td style=""> slide-interval (可选) </td> 
 <td style=""> 数字 </td> 
 <td style=""> 自动播放的间隔时间,默认为4000毫秒。 </td> 
 </tr> 
 <tr style=""> 
 <td style=""> show-pager (可选) </td> 
 <td style=""> 布尔值 </td> 
 <td style=""> 否显示分页器分页器用来指示幻灯页的选中状态，位于幻灯片的底部，默认为黑色的实心小圆 </td> 
 </tr> 
 <tr style=""> 
 <td style=""> pager-click (可选) </td> 
 <td style=""> 表达式 </td> 
 <td style=""> 如果shou-pager为true，当点击页面分页器时，触发该表达式，传递一个'索引'变量。 </td> 
 </tr> 
 <tr style=""> 
 <td style=""> on-slide-changed (可选) </td> 
 <td style=""> 表达式 </td> 
 <td style=""> 当幻灯页滑动时，触发该表达式。传递一个'索引'变量。 </td> 
 </tr> 
 <tr style=""> 
 <td style=""> active-slide (可选) </td> 
 <td style=""> 表达式 </td> 
 <td style=""> 根据下标值，指定选中的幻灯页。 </td> 
 </tr> 
 <tr style=""> 
 <td style=""> auto-play(可选) </td> 
 <td style=""> 布尔值 </td> 
 <td style=""> 是否自动播放幻灯页 </td> 
 </tr> 
 </tbody> 
</table>

**三、$ionicSlideBoxDelegate介绍**

可以使用$ionicSlideBoxDelegate控制所有的滑动框，常见方法如下：

**源码：**

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