ionic入门教程第十三课-多级分类列表的简单实现

今天给大家讲一个很简单实用的多级分类列表，

一样的也是今天一个朋友问我的问题。

大概的需求是这个样子的，要做一个三级分类的页面。

下面来说一下思路吧！

先获取一级分类的数据，然后通过遍历得到头部的1级页面内容。

然后取第一个数据，获取他的二级页面的数据，还是通过遍历得到左边2级页面的内容。

再取2级页面的第一个数据，获取它的三级页面的数据，通过遍历绘制。

由于我没有写服务端，所以我在服务里面写了一下三个方法，模拟这个数据获取过程。

通过方法很容易理解的，就是获取一级分类，然后用1级分类的名字去获取2级分类。

现在先绘制1级页面。其实这个1级页面可以理解为一个在上方的tabs。可以扩展成slide-tabs或者autoplay-tabs。

编译：

为了美观，我们给这个东西加上一点样式。

详细样式实现这里就不说了，看Demo。

然后为了区分选中状态，我们再给1级分类写上一个选择态的类。

这里的实现需要说一下；

使用ng-class，指的是当slideIndex和当前li的index相同时，给样式加上current的类。这里的slideIndex使我们在控制器里面定义的一个用来记录选中index的变量。

$index是框架自带的，用来表示当前是ng-repeat的数据的第几项。从0开始。

当用户点击1级分类时触发获取2级分类的数据。

类似的方法绘制二级页面的内容

然后当用户点击2级分类的项时同样的处理方法，获取3级页面的数据。当用户点击3级页面时，在界面上显示内容。

方法都类似拷贝一下就好了。

这是一个很简单的内容，有些朋友会把他们想的复杂了，甚至用上递归或者循环。

使得代码逻辑复杂化了。

虽然这个分类的实现上很简单但是它的可扩展性非常好，在这个基础上做优化。

比如将服务器获取的数据缓存在本地，当用户点击切换tabs的时候，并不需要每一次都去向服务器请求。

而是先获取本地缓存，如果存在就取缓存，不存在再去向服务器请求。然后还可以给这个缓存加上一个有效期，使列表的数据保持准确性。

而且这个多级分类在如电商项目中使用的也比较多，像京东

还有折八百

还有很多。恩，看了这两个高大上美观的界面，让我们再看一眼，本次Demo中实现的界面吧！

恩，真的很丑。

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

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