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

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

1、分类详情mock数据

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

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

左侧菜单导航栏基本数据结构

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

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

右侧菜单详情的数据结构

2、axios请求数据

axios数据请求.png

3、渲染到页面结构上

（1）左侧菜单栏

左侧菜单栏数据渲染

（2）右侧菜单详情

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

右侧菜单详情的数据渲染

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

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

定义currentIndex

（2）动态的class设置

动态的class设置.png

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

添加事件并传入i索引d

定义点击事件并改变currentIndex的值

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

5、其它

基本效果

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