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

昨夜雾浓 2018-04-25

展开全文

网上有太多的例子实现广告图片无限滚动及点击事件，但是那都是自己利用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./it/u=4041718731,746112096&fm=21&gp=0.jpg">
    </div>
  </ion-slide>
  <ion-slide>
    <div class="box yellow">
      <img src="http://img./20150619/20150619_100607_883_670.png">
    </div>
  </ion-slide>
  <ion-slide>
    <div class="box pink">
      <img src="http://img./20150714/20150714_172952_955_22.jpg">
    </div>
  </ion-slide>
</ion-slide-box>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

api里提到的属性也全部包含，注意还有css样式，js控制器，一并给出源码：
样式基本设置宽度而已，css:

.box{
    width: 100%;
    height: 160px;
}
div > img{
    width: 100%;
    height: 100%;
}1
2
3
4
5
6
7
8

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;
               });1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

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

delegate-handle,这是设置代理的，值为字符串，看js中的 $s c o p e . d e l e g a t e H a n d l e, 他的类型是$ 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的图片上。