ionic入门教程第十四课-详细说明slide-tabs的实现和优化

不少朋友对我在第十课中提到的slide-tabs比较感兴趣，

/article/7590171.html第十课

问的人，要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>

注意这上下的修改是要对应的。[/code]

再比如要增加一个tab，在1和2之间，想想就好麻烦。

所以我对这个东西进行了优化。

首先先把slide-box里面的ion-slide的内容分离出来。

<ion-slide >
<div ng-include="'templates/slidetabs/welcome.html'" class="padding"></div>
</ion-slide>

分别把各个页面分离出来，是的这个界面的代码变得简洁清晰。[/code]

在这里将页面和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

演示地址：点我

如果你还有什么其他的问题,可以通过以下方式找到我
QQ:448627663
E-mail:448627663
新浪微博:小虎Oni
微信公众号:ionic__