ionic入门教程第十课-接着说说ion-slide-box和它的注意事项、slide-tabs
来源:互联网 发布:域名邮箱怎么弄 编辑:程序博客网 时间:2024/05/26 12:56
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
--- 转自:http://blog.csdn.net/onil_chen/article/category/6113346 ---
- ionic入门教程第十课-接着说说ion-slide-box和它的注意事项、slide-tabs
- ionic入门教程第十课-接着说说ion-slide-box和它的注意事项、slide-tabs
- ionic入门教程第十四课-详细说明slide-tabs的实现和优化
- ionic入门教程第十四课-详细说明slide-tabs的实现和优化
- ionic的ion-slide-box使用ng-repeat不显示
- ionic 幻灯指令 ion-slide-box
- ionic ion-slide-box学习笔记整理
- 利用ionic里的<ion-slide-box>和 modal 做个仿淘宝商品详情页顶部轮播图的demo
- Ionic基础——幻灯指令 ion-slide-box
- ionic之ion-slide-box实现图片轮播
- ionic 滑动块 ion-slide-box 左右无缝滚动
- ionic中的slide-box
- ionic,ion-slide-box获取后台数据后循环播放失效的解决方法。
- 解决Ionic的ion-slide-box 2条数据渲染问题
- ionic 控制每个ion-slide 显示的数量
- ionic slide-box(滑动框)
- angularjs+ionic 轮播ion-slide-box标签使用下拉重新请求数据之后页面变形
- ionic ion-slide-box网络加载图片,及时更新,无限循环
- nefu 115 斐波那契的整除 找规律
- 127. Word Ladder(BFS)
- Mybatis最入门---动态查询(where,trim,set)
- SVG简单画图
- 在pycharm中使用anaconda
- ionic入门教程第十课-接着说说ion-slide-box和它的注意事项、slide-tabs
- 在spring mvc项目中实现登录账号单浏览器登录
- appwidget 窗口小部件onTouch事件及手势识别
- android自定义View文本居中
- Mybatis最入门---动态查询(foreach)
- C++设计模式-Prototype原型模式
- 诗一首
- LaTeX Error: Something's wrong--perhaps a missing \item.
- crontab定时器任务