ionic入门教程第十课-接着说说ion-slide-box和它的注意事项、slide-tabs

这几天搬家,没空写,这是前几天写的,放在草稿箱中忘记发了。

本节课紧跟上节课的内容,没看过的朋友可以先看一下上节课。http://blog.csdn.net/onil_chen/article/details/51180884

太多的前言我就不写了,直接开始正题吧!

我们要做的是一个这样的Banner。


首先建立热门的相关文件。

www/js/contrololers目录下新建HotGameCtrl.js

www/js/services目录下新建HotGameService.js

www/templates目录下新建hotGame.html

把HotGameService加到services文件里面。

第四课里面改过了按需加载controller文件,

所以HotGameCtrl一样的处理方式处理。

然后在route里面配置热门游戏。



HotGameService.js

这里我们需要一组banner的数据,所以我们想服务发起请求。

我们只管发起请求,控制器不做数据处理。

这个过程我在第八课中说的很清楚了,还有一张很丑的图。


详情请见:http://blog.csdn.net/onil_chen/article/details/51154691


这里涉及$q的使用,详情可见第五课http://blog.csdn.net/onil_chen/article/details/51099443

HotGameService.js


1、获取数据和数据处理都在服务这里完成

2、从大的数据中取出我们需要的数据组成一个新的小对象,再把小对象传递给控制器,这里涉及到性能优化问题。

    在做数据查询是很多后台都会把一整行的数据库内容取出来传给前端,但其实有些数据我们未必有需要。所以这里可以多做一步处理。

    好处很明显,在ng-repeat的时候小对象的解析明显优于大对象。缺点就是修改需求的时候,这里的代码也要维护,增加了人工维护成本。

    不理解的可以直接deferred.resolve(resData)也可以

3、要注意的是我们返回的是那个小数据。

hotGame.html


这里定义一个slide-box ,这里我只设置了一个自动播放的属性。

允许属性如下:


上面有一个参数说明是错误的,does-continue 表示是否循环。auto-play才是是否自动滑动。

运行程序:


发现banner的图片太大了,根据上节课说的调试方法,修改一下图片样式就可以了。

这里有几点要说的

1、banner一般都对应了动作事件,可以在<img >标签里面使用ng-click绑定事件

2、在把值赋给banner时,记得调用$ionicSlideBoxDelegate.update()有时候banner总是莫名其妙的没掉,就是少了这个更新。特别是使用ne-repeat的时候。

修改后的代码:



ion-slide-box需要注意的地方还是挺多的,而且这些地方没处理好的话,也没有报错,banner直接不出现,刚开始接触的时候真的有点头大的。

这里再介绍一种活用ion-slide-box的方法,就是相当于把ion-slide的内容替换成一个页面。

实现如下:



运行界面:


介于博客篇幅问题,我这里就不详细展开讲这个slide-tabs。

但其实这个是很实用的,在挺多项目中都有用到这样的功能。

后面如果有朋友感兴趣的,我再另发一个博客说明。

请大家关注一下我的公众号,就算给我一点点鼓励吧大笑

项目Demo地址:http://pan.baidu.com/s/1dFNlxTn
如果你还有什么其他的问题,可以通过以下方式找到我

新浪微博:小虎Oni
微信公众号:ionic__



原文地址:https://www.cnblogs.com/xiaohuoni/p/7642301.html