小程序项目--电商优购day02

分类页面

效果

业务逻辑

1.加载分类⻚⾯数据
2.点击左侧菜单，右侧数据动态渲染

接口

https://api-hmugo-web.itheima.net/api/public/v1/categories

返回示例

{
   
  "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
  }
}

关键技术

1.scroll-view view 组件
2. es7的 async 和 await

代码

1.分类js文件实现代码

// pages/category/index.js
import {
   request} from '../../request/index'
Page({
   
  data: {