不少朋友对我在第十课中提到的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__