黑马优购分类页面

最新推荐文章于 2024-03-27 23:18:51 发布

拾辞

最新推荐文章于 2024-03-27 23:18:51 发布

阅读量824

点赞数 2

分类专栏：微信小程序文章标签：小程序

本文链接：https://blog.csdn.net/mszLOVEyjj/article/details/116945685

版权

本文详细介绍了如何使用小程序开发一个分类页面，包括网络请求数据解析、分类布局设计、搜索组件引用、页面左右分割、菜单选中样式、动态切换商品内容以及处理菜单点击后右侧列表回顶部的功能实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

1.1分类效果图

首先我们看我们要实现的效果
在这里插入图片描述

1.2网络请求跟数据解析

1.1.1数据解析

该接口数据返回格式为：

{
   
    "message":[
        {
   
            "cat_id":1,
            "cat_name":"大家电",
            "cat_pid":0,
            "cat_level":0,
            "cat_deleted":false,
            "cat_icon":"/full/none.jpg",
            "children":[
                {
   
                    "cat_id":3,
                    "cat_name":"电视",
                    "cat_pid":1,
                    "cat_level":1,
                    "cat_deleted":false,
                    "cat_icon":"/full/none.jpg",
                    "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"
                        },
                        {
   
                            "cat_id":6,
                            "cat_name":"海信",
                            "cat_pid":3,
                            "cat_level":2,
                            "cat_deleted":false,
                            "cat_icon":"https://api-hmugo-web.itheima.net/full/5e38cf9e6e7c46a17fe1c597a883ae627977b296.jpg"
                        }
                    ]
                }
            ]
        }
    ]
}

1.1.2请求数据，处理数据

在category/index.js中，声明所需数据：

   data: {
   
      left_list:[], //左侧
      right_list:[

最低0.47元/天解锁文章