电商实战项目-分类页面

最新推荐文章于 2024-08-03 10:39:29 发布

cdgogo

最新推荐文章于 2024-08-03 10:39:29 发布

阅读量454

点赞数

分类专栏： # 电商实战项目

本文链接：https://blog.csdn.net/cdgogo/article/details/108977030

版权

本文详细介绍了电商实战项目中分类页面的实现过程，包括接口数据的处理，页面布局设计，点击菜单的商品内容切换，利用缓存技术提高性能，实现右侧列表置顶功能，以及接口代码的优化，如提取公共路径和使用es7的async来管理异步操作，以提升代码效率。

摘要由CSDN通过智能技术生成

在这里插入图片描述

接口数据

接口返回实例：

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

页面布局

<!-- pages/category/index.wxml -->
<view class="cates">
    <SearchInput></SearchInput>
    <view class="cates-container">
        <scroll-view class="left-menu" scroll-y="{
    {true}}">
           <view class="menu-item {
    {index == currentIndex ? 'active': ''}}" 
           wx:for="{
    {leftMenuList}}"
           wx:key="*this"
           catchtap="handleItemTap"
           data-index="{
    {index}}">
           {
  {item}}
           </view>
        </scroll-view>
        <scroll-view class="right-content"