ionic入门教程第十四课-详细说明slide-tabs的实现和优化
来源:互联网 发布:大数据hadoop入门书籍 编辑:程序博客网 时间:2024/05/24 00:01
不少朋友对我在第十课中提到的slide-tabs比较感兴趣,
http://blog.csdn.net/onil_chen/article/details/51191827第十课
问的人,要Demo的人也多。
所以今天花点时间,详细的讲解一下slide-tabs的实现和优化。
首先我们先来看看最初的这个Demo的实现。(样式部分不详解,直接看Demo)
先看效果吧!
上面有一个tabs,下面有一个slide-box。然后把slide-box里面的内容替换成页面,再把tabs和slide-box捆绑起来,就实现了最基础的slide-tabs了。
恩,我这里都说的比较简单了,我是默认了大家对ionic都有点基础了,如果你不太理解我说的这些东西,建议你可以先看一下我的前面几个教程。
通过上面的代码,我们容易看出在tabs的click事件里面,调用了$ionicSlideBoxDelegate.slide(index);也就是通过js切换了slide-box。
而在slide-box的滑动切换事件on-slide-changed里面,调用了$scope.slideIndex= index;
然后通过响应tab的ng-class="slideIndex == 0 ? 'current col-25':'col-25'"修改tab的样式达到类似选中的表现。
这里有几个地方需要注意的:
1、上面的tabs数量要跟下面的slide-box的数量相同
2、角标也要相同
3、页面的代码是直接写在ion-slide里面的
这几个地方都是容易出错而且较为繁琐的。然后页面代码直接写在ion-slide里面,如果切换页面较多,或者页面较为复杂,将会是当前文件过大,代码量多,开发成本高,维护困难。
比如说现在需要删掉tab2,然后就要删掉
<li ng-class="slideIndex == 1 ? 'current col-25':'col-25'"><a href="#" ng-click="activeSlide(1)">Tab02</a></li>
和
<ion-slide> <h3>Tab 2</h3></ion-slide>注意这上下的修改是要对应的。
再比如要增加一个tab,在1和2之间,想想就好麻烦。
所以我对这个东西进行了优化。
首先先把slide-box里面的ion-slide的内容分离出来。
<ion-slide > <div ng-include="'templates/slidetabs/welcome.html'" class="padding"></div></ion-slide>分别把各个页面分离出来,是的这个界面的代码变得简洁清晰。
在这里将页面和html文件关联在一起,然后修改页面内容的时候只要修改相对应的html文件就可以了。
查看一下运行结果:
但是在增加、删除和修改tab的时候还是要注意对应关系,上面改一处下面改一处,还是不够方便。
然后我再对这个东西做一次优化
把tab的名字和它对应的html文件,写成类似配置表的变量
然后在界面中遍历这个对象
这里不难理解,就是使用ng-repeat替换掉了原本重复编写的界面代码,但是这里需要留意的是在上边的tab的li的ng-class里面增加了$index,还有ng-click里面也增加了 $index,关于$index我们上节课也提到过,可以简单的理解为数组的角标。
然后这里我们还关注到了在ion-slide-box标签内还有几个参数,一起写到配置里面去。
然后在界面上使用
这样就可以了,修改页面内容的时候,只要修改对应的html文件
然后需要增加或者修改tab是只要修改初始化数据$scope.initSlideTabs就可以了。代码的功能和模块相对来说更加的清晰。
项目Demo地址:http://pan.baidu.com/s/1miyATKW
演示地址:点我
如果你还有什么其他的问题,可以通过以下方式找到我
新浪微博:小虎Oni
微信公众号:ionic__
- ionic入门教程第十四课-详细说明slide-tabs的实现和优化
- ionic入门教程第十四课-详细说明slide-tabs的实现和优化
- ionic入门教程第十课-接着说说ion-slide-box和它的注意事项、slide-tabs
- ionic入门教程第十课-接着说说ion-slide-box和它的注意事项、slide-tabs
- ionic slide tabs实现滑动菜单
- ionic入门教程第二课-从Tabs案例看Ionic的MVC架构
- ionic入门教程第二课-从Tabs案例看Ionic的MVC架构
- ionic的tabs学习
- ionic入门教程第十三课-多级分类列表的简单实现
- ionic入门教程第十三课-多级分类列表的简单实现
- ionic的ion-tabs和ion-side-menus
- ionic入门教程第七课-简要说明几种界面之间的参数传递及优缺点
- ionic入门教程第七课-简要说明几种界面之间的参数传递及优缺点
- ionic入门教程第一课--环境搭建和新建ionic项目
- ionic入门教程第一课--环境搭建和新建ionic项目
- Ionic Tabs
- ionic入门教程第八课-(加更)从无到有说Ionic、画图说明MVC-U-S
- ionic入门教程第八课-(加更)从无到有说Ionic、画图说明MVC-U-S
- 邻近搜索(proximity search)中的两个倒排记录表
- iOS开发——返回特定的控制器
- is not allowed to connect to this MySQL server解决办法
- 解决Scrapy性能问题——案例六(下载器中请求太少)
- iOS presentViewController两个视图控制器的时候返回根视图
- ionic入门教程第十四课-详细说明slide-tabs的实现和优化
- loadrunner设置关联
- 记录日志
- 搭建Maven私服,并配置Nexus环境
- mysql简单统计
- 2016-4-28知识整理
- #HDU 1166 敌兵布阵 【线段树板题】
- 自定义View 应用于用户头像背景圆框
- Effective Java读书笔记 第二部分(第7章-第11章)