ionic 实现广告图片无限滚动标签介绍

网上有太多的例子实现广告图片无限滚动及点击事件，但是那都是自己利用css和js结合实现的，在这里，ionic已经很强大的给我们提供了一个标签，简单几行代码就能实现煊人的效果，没必要去重得的发明轮子，这篇文章是基于官网翻译过来的，并提供源码参考，对不想看英文的同胞能快速的上手。在此提供官网链接，有兴趣的可直接查看官网：官网地址

首先，实现图片无限滚动，ionic提供了标签< ion-slide-box >,行提供官方的使用方法及api:



使用方法相当简单，api描述也很简洁，参数描述也基本见名知义了，接下来看下本人写的demo的源码：

<ion-slide-box on-slide-changed="slideHasChanged($index)" auto-play="true" does-continue="true" slide-interval=2000 show-pager="true" pager-click="pageClick(index)" active-slide="model.activeIndex" delegate-handle="delegateHandler">
<ion-slide>
<div class="box blue">
<img src="http://img5.imgtn.bdimg.com/it/u=4041718731,746112096&fm=21&gp=0.jpg">
</div>
</ion-slide>
<ion-slide>
<div class="box yellow">
<img src="http://img.iyookee.cn/20150619/20150619_100607_883_670.png">
</div>
</ion-slide>
<ion-slide>
<div class="box pink">
<img src="http://img.iyookee.cn/20150714/20150714_172952_955_22.jpg">
</div>
</ion-slide>
</ion-slide-box>

api里提到的属性也全部包含，注意还有css样式 ，js控制器，一并给出源码：

样式基本设置宽度而已，css:

.box{
width: 100%;
height: 160px;
}
div > img{
width: 100%;
height: 100%;
}

js控制器，如果不了解angularjs先了解下他的用法：

//app也在app.js中定义（var app = angular.model(...)）
app.controller('HouseCtrl', function($scope, $ionicSlideBoxDelegate,House) {
//为了验证属性active-slide定义的模型，angularjs是mvc模式
$scope.model = {
activeIndex:0
};

//此事件对应的是pager-click属性，当显示图片是有对应数量的小圆点，这是小圆点的点击事件
$scope.pageClick = function(index){
//alert(index);

$scope.model.activeIndex = 2;
};

//当图片切换后，触发此事件，注意参数
$scope.slideHasChanged = function($index){
//alert($index);

};
//这是属性delegate-handle的验证使用的，其实没必要重定义，直接使用$ionicSlideBoxDelegate就可以
$scope.delegateHandle = $ionicSlideBoxDelegate;
});

看上面的注释说明，基本事件也就这几个，接下来说下各个属性的含义：

delegate-handle,这是设置代理的，值为字符串，看js中的scope.delegateHandle,他的类型是scope.delegateHandle,他的类型是
ionicSlideBoxDelegate,一般可以不用设置，直接在js中使用控制器注入的$ionicSlideBoxDelegate就行了，了解更多ionicSlideBoxDelegate，看官网说明文档，地址：官方文档

也就几个方法，在此不作说明，使用的概率太小了。

2.does-continue,是否循环播放，默认是循环的

3.auto-play,是否自动播放，如果does-continue为真他就是真的，自动播放

4.slide-interval，间隔时间，默认4秒，可设置，单位是毫秒

5.show-pager,是否显示小圆点了，默认显示

6.pager-click,小圆点的点击事件，必须设置小圆点显示才能触发

7.on-slide-changed,切换事件，搞开发的基本都接触过此类事件

8.active-slide,官方解释：Model to bind the current slide index to.说白了就是当前图片的下标与实体类的属性绑定了，angularjs支持双向绑定，绑定后你可以在js中改变实体类的属性值，会切换到对应的下标对对应的图片。我js中也ip演示了这个效果，当点击小圆点时切换到下标为2的图片上。

此篇文章通篇都是对官网文档的翻译，如果官网文档有更新，请参考官网文档