微信小程序购物商城项目：四、分类页面

四、分类页面

4.0 创建 cate 分支

运行如下的命令，基于 master 分支在本地创建 cate 子分支，用来开发分类页面相关的功能：

 git checkout -b cate

4.1 渲染分类页面的基本结构

1. 页面结构

2. 动态计算窗口剩余高度：

3. 美化页面结构

测试结果如下：

4.2 获取分类数据

获取到的数据示例如下：

 {
   "message": [
     {
       "cat_id": 1,
       "cat_name": "大家电",
       "cat_pid": 0,
       "cat_level": 0,
       "cat_deleted": false,
       "cat_icon": "",
       "children": [
         {
           "cat_id": 3,
           "cat_name": "电视",
           "cat_pid": 1,
           "cat_level": 1,
           "cat_deleted": false,
           "cat_icon": "",
           "children": [
             {
               "cat_id": 5,
               "cat_name": "曲面电视",
               "cat_pid": 3,
               "cat_level": 2,
               "cat_deleted": false,
               "cat_icon": "https://api-hmugo-web.itheima.net/full/2fb113b32f7a2b161f5ee4096c319afedc3fd5a1.jpg"
             }
           ]
         }
       ]
     }
   ],
   "meta": {
     "msg": "获取成功",
     "status": 200
   }
 }

返回参数说明

参数名	类型
cat_id	int	分类id
cat_name	string	分类名称
children	array	子节点
cat_icon	string	图标

微信小程序购物商城项目：四、分类页面

四、分类页面

4.0 创建 cate 分支

4.1 渲染分类页面的基本结构

1. 页面结构

2. 动态计算窗口剩余高度：

3. 美化页面结构

4.2 获取分类数据

4.3 动态渲染左侧的一级分类列表

1. 循环渲染列表结构

2. 在 data 中定义默认选中项的索引

3. 循环渲染结构时，为选中项动态添加 .active类名

4. 为一级分类的 Item 项绑定点击事件处理函数 activeChanged

5. 定义 activeChanged 事件处理函数，动态修改选中项的索引

4.4 动态渲染右侧的二级分类列表

1. 在 data中定义二级分类列表的数据节点

2. 修改 getCateList方法，在请求数据之后，为二级分类列表数据赋值

3. 修改 activeChanged方法，在一级分类项改变之后，为二级分类列表数据重新赋值

4. 循环渲染右侧二级分类列表的UI结构

5. 美化二级分类的标题样式

6. 测试结果

4.5 动态渲染右侧的三级分类列表

1. 在二级分类的 组件中，循环渲染三级分类的列表结构

2. 美化三级分类的样式

4.6 切换一级分类后重置滚动条的位置

1. 在 data 中定义 滚动条距离顶部的距离

2. 动态为右侧的 组件绑定 scroll-top属性的值

3. 切换一级分类时，动态设置 scrollTop 的值

4.7 点击三级分类跳转到商品列表页面

4.8 分支的合并与提交

1. 在二级分类的组件中，循环渲染三级分类的列表结构

1. 在 data 中定义滚动条距离顶部的距离

2. 动态为右侧的组件绑定 scroll-top属性的值