开课了，开课了，
朋友们，
我们用了4篇文章的篇幅实现了小程序首页的搜索框、轮播图以及底部导航菜单的设置，
呈现出现的效果，下图所示：
接下来，这一章我们来实现首页的第二个模块效果——分类导航的设置，如下图：
这一部分很简单，由上图可知，
在分类导航中，只有一行，共有四个标签，需要四张图片即可。
要想实现上图的效果，需要两大步！一起来看一下吧~
(一) 打开接口文件
1、我们找到请求url，见下图：
(原谅我无法直接贴上网址，系统不让呢，小声嘀咕==)。
2、复制网址，粘贴至浏览器中并打开，返回参数如下图所示：
由上图可知，数据均已全部显示。
其中，message为"数独"，里面有"0"，"1"，"2"，"3" 4个数据；
标题是"分类"，"秒杀拍"，"超市购"，"母婴品"，
这与我们今天要实现的分类导航的效果图显示的分类是一致的。
但是，有一点需要大家睁大眼睛：我们点开其中一个分类图标的图片，如下图：
可以看到，图标不仅包括图标本身，也包含图标文字。
上图中，我们的美工小姐姐将"分类"二字也一同做成图标了。
所以，我们在做标签时，无须再加文字，直接敲图片的代码就ok了~
(二)写代码
1、打开pages文件夹中的index.js文件，紧接着上节课的代码下面，直接写入获取轮播图数据的代码：
getSwiperList(){} 将页面上方的"request"代码复制，粘贴至 "getSwiperList"内，代码如下所示：
复制getSwiperList 函数，并放在该文件下的onload中进行调用，代码如下：
this.getSwiperList(); 保存当前，观察小程序的界面是否发生变化。
若小程序的界面未发生改变，调试区也没有报错，则表示我们这部分的代码书写成功！
2、在index.js文件中pages字段-data函数中，写入导航数组：
复制步骤1所写的获取轮播图数据的代码，粘贴至其下方，并修改，代码如下：
this.getCateList(); 再将"getCateList"复制至上方的onload函数内进行调用，代码如下：
this.getCateList(); 写好后，保存，点击调试器-AppData，可看到swiperList和catesList这部分均有数据存在，且与开始时的接口文件所显示的数据一致，这就表示已成功获取分类导航的数据了。
3、 渲染swiperList和catesList的数据。
找到index.wxml文件，写入如下代码：
保存代码，可看到小程序已渲染出图标标签：
拖动小程序界面，上下来看，虽然图标已渲染出来，但是样式很丑，需要我们进一步进行修改标签的样式。
4、 修改标签样式。
首先，打开index.less文件，写入如下代码：
.index_cate { display: flex;}.index_cate navigator { padding: 20rpx; flex: 1;}.index_cate navigator image { width: 100%;} 在index.wxss文件中，写入如下代码，保存：
.index_cate { display: flex;}.index_cate navigator { padding: 20rpx; flex: 1;}.index_cate navigator image { width: 100%;} 全部保存后，小程序的分类导航就大功告成了！！
通过上面的步骤，我们首页的分类导航就做好了！
下一节我们来设置首页的第三个模块—楼层，感兴趣的朋友们赶紧学习起来吧~~~~