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的图片上。

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

ionic 实现广告图片无限滚动标签介绍相关推荐

html中实现图片的无限滚动,CSS3 背景图片无限滚动之波浪效果的实现
效果 HTML body{ background: #2f2e34; } .a,.b,.c{width: 100%; height: 240px; position: absolute; bottom ...
scrollView无限滚动，横屏和竖屏
图片无限滚动原理: 在可见的窗口外左右各创建一个复用的imageView. 假设每个imageView宽度是width1,每当滚屏的偏移量>=width1 或者 <=0时,刷新所有的ima ...
html 文字、图片水平无限滚动
html 文字.图片水平无限滚动经常在淘宝.京东的app页面中看见水平的广告轮播和中奖信息的轮播. 我知道的实现这种无限滚动效果的方法有三种: 使用CSS3样式实现使用js实现 marquee标签 ...
图片旋转、无限滚动、文字跳动
本人录制技术视频地址:https://edu.csdn.net/lecturer/1899 欢迎观看. 这一节,继续为大家介绍,使用 HTML5 + CSS3 实现的一些动画特效.由于它们实现起来比较 ...
Android广告图片轮播，支持无限循环和设置轮播样式、切换时间等
Android-----------广告图片轮播控件 Banner广告图片轮播控件,支持无限循环和多种主题,可以灵活设置轮播样式.动画.轮播和切换时间.位置.图片加载框架等! 很多Android AP ...
JS无限滚动、回到顶端和图片懒加载
目录前言 1 无限滚动(垂直) 1.1 效果和代码 1.2 过程解释 1.2.1 监听页面滚动 1.2.2 获取距页面底部的距离 2 回到顶端 2.1 效果和代码 2.2 过程解释 3 图片懒加载 ...
图片轮播c语言,IOS开发之UIScrollView实现图片轮播器的无限滚动
IOS开发之UIScrollView实现图片轮播器的无限滚动简介在现在的一些App中常常见到图片轮播器,一般用于展示广告.新闻等数据,在iOS内并没有现成的控件直接实现这种功能,但是通过UIScr ...
JQuery图片无限循环滚动源码
平常项目中经常用到图片循环滚动,所以就写些必要的CSS定位,JS基本算法,最后就封装成JQuery图片无限循环滚动插件类,其实本质上是li块无限循环滚动,li块里面不管是图片还是其它内容,都OK的. ...
图片动画横条广告带上下滚动
查看效果:http://keleyi.com/keleyi/phtml/flash/ 以下是HTML文件代码: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD ...

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

ionic 实现广告图片无限滚动标签介绍相关推荐

最新文章

热门文章