开始上课，开始上课，
朋友们，
我们用了四篇文章来设置小程序首页的搜索框、轮播图和底部导航菜单。
最终的效果如下图所示:
接下来，本章我们将实现首页的第二个模块效果——分类导航的设置，如下图:
这部分很简单。从上图可以看出，
分类导航，只有一行，有四个标签，需要四张图片。
要达到上图的效果，需要两大步骤！一起看看吧~
开放接口文件
1.我们找到了请求url，如下所示:
。
2.复制网址，粘贴到浏览器中并打开它。返回参数如下图所示:
从上图可以看出，所有的数据都已经显示出来了。
其中，message是“数独”，包含“0”、“1”、“2”、“3”四个数据。题目分别是“分类”、“秒杀”、“超市购买”、“母婴用品”，
这与我们今天要实现的分类导航效果图中显示的分类是一致的。
但是，有一件事我们需要擦亮眼睛:让我们点击其中一个分类图标的图片，如下图:
如您所见，图标不仅包括图标本身，还包括图标文本。
上图中，我们的小姐姐美工也把“分类”这个词做成了图标。
所以我们在做标签的时候，不需要再加什么字，只要点一下图片的代码就ok啦~
写代码
1.打开pages文件夹中的index.js文件，在上一课代码的正下方，直接编写获取轮播数据的代码:
GetSwiperList{}将页面顶部的“请求”代码复制粘贴到“GetSwiperList”中。代码如下:
复制getSwiperList函数，并在这个文件下的onload中调用它。代码如下:
this.getSwiperList
保存，观察小程序的界面是否有变化。
如果小程序的界面没有变化，调试区没有错误，说明我们的部分代码写成功了！
2.在index.js文件的pages字段数据函数中，编写导航数组:
复制步骤1中编写的用于获取carousel数据的代码，粘贴到下面，并对其进行修改。代码如下:
this.getCateList
然后将“getCateList”复制到顶部的onload函数中进行调用。代码如下:
this.getCateList写完后保存，点击debugger -AppData，可以看到swiperList和catesList中有数据，与界面文件一开始显示的数据一致，说明已经成功获取了分类导航数据。
3.呈现swiperList和catesList的数据。
找到index.wxml文件并编写以下代码:
保存代码，您可以看到applet已经呈现了图标标签:
拖动小程序界面。上下看了一下，虽然已经渲染了图标，但是样式很难看，我们需要进一步修改标签的样式。
4.修改标签样式。
首先，打开index.less文件并编写以下代码:
.index _ cate { display:flex；}.index_cate导航器{ padding:20 rpx；flex:1；}.index_cate导航器图像{宽度:100%；}
在index.wxss文件中，编写以下代码并保存:
.index _ cate { display:flex；}.index_cate导航器{ padding:20 rpx；flex:1；}.index_cate导航器图像{宽度:100%；}全部保存后，小程序的分类导航就完成了！!
通过以上步骤，我们首页的分类导航就完成了！
在下一节中，让我们设置主页的第三个模块——楼层。感兴趣的朋友赶紧学起来吧~ ~ ~
