20、分类详情页之数据渲染

前言：本章的主要知识点有 ① 详情页mock数据的建立；② axios数据的获取与渲染；③ 点击菜单导航栏动态的添加css样式
Github：https://github.com/Ewall1106/mall（请选择分支chapter20）

1、分类详情mock数据

进入mock文件夹中，新建classify.json文件。

（1）根据我们的页面结构，我们设置左侧导航菜单的数据格式

然后复制一系列就是我们左侧栏的各个标题了，记住这里的每个标题的id要和首页各个分类名的id相对应。

（2）右侧栏数据同理
这是我们右侧分类详情的一个基本数据结构：

2、axios请求数据

3、渲染到页面结构上

（1）左侧菜单栏

（2）右侧菜单详情

因为右侧菜单详情是根据用户点击左侧菜单栏中的某一个来切换获取数据，然后再渲染到页面上的，后期建立了数据库了再进行表查询，这里先把mock数据写死，写个基本的数据渲染。

4、点击菜单导航栏动态的添加css样式

（1）定义一个当前的索引currentIndex，默认为0

（2）动态的class设置

（3）添加事件改变改变currentIndex索引值

这样我们就可以根据传入不同的索引或者id值改变右侧菜单详情的数据内容了。

5、其它

这章很简单， 下章讲一个better-scroll组件库在分类详情页面的运用。