微信小程序如何实现商品分类列表

在微信小程序中实现商品分类列表是一个常见的需求，尤其是在电商类小程序中。通过合理的分类展示，用户可以快速找到自己感兴趣的商品，提升用户体验。本文将介绍如何通过微信小程序实现商品分类列表功能。

1. 数据结构设计

首先，我们需要设计一个合理的数据结构来存储商品分类信息。通常，商品分类可以分为多级，例如一级分类、二级分类等。以下是一个简单的数据结构示例：

{
  "categories": [
    {
      "id": 1,
      "name": "电子产品",
      "subCategories": [
        {
          "id": 101,
          "name": "手机"
        },
        {
          "id": 102,
          "name": "电脑"
        }
      ]
    },
    {
      "id": 2,
      "name": "服装",
      "subCategories": [
        {
          "id": 201,
          "name": "男装"
        },
        {
          "id": 202,
          "name": "女装"
        }
      ]
    }
  ]
}

在这个结构中，categories 是一个数组，每个元素代表一个一级分类。每个一级分类包含 id、name 和 subCategories 字段，其中 subCategories 是一个数组，存储该一级分类下的二级分类。

2. 页面布局

接下来，我们需要在小程序页面中展示这些分类信息。通常，商品分类列表可以通过左右两栏布局来实现：左侧显示一级分类，右侧显示对应的二级分类。

2.1 WXML 结构

<view class="container">
  <!-- 左侧一级分类 -->
  <scroll-view class="left-category" scroll-y>
    <block wx:for="{{categories}}" wx:key="id">
      <view 
        class="category-item {{activeCategoryId === item.id ? 'active' : ''}}" 
        bindtap="switchCategory" 
        data-id="{{item.id}}"
      >
        {{item.name}}
      </view>
    </block>
  </scroll-view>

  <!-- 右侧二级分类 -->
  <scroll-view class="right-category" scroll-y>
    <block wx:for="{{activeSubCategories}}" wx:key="id">
      <view class="sub-category-item">
        {{item.name}}
      </view>
    </block>
  </scroll-view>
</view>

2.2 WXSS 样式

.container {
  display: flex;
  height: 100vh;
}

.left-category {
  width: 30%;
  background-color: #f5f5f5;
}

.right-category {
  width: 70%;
  background-color: #fff;
}

.category-item {
  padding: 20rpx;
  text-align: center;
  border-bottom: 1rpx solid #ddd;
}

.category-item.active {
  background-color: #fff;
  color: #ff0000;
}

.sub-category-item {
  padding: 20rpx;
  border-bottom: 1rpx solid #eee;
}

3. 逻辑实现

在页面的 JavaScript 文件中，我们需要处理一级分类的点击事件，并根据点击的一级分类动态更新右侧的二级分类列表。

3.1 数据初始化

Page({
  data: {
    categories: [], // 存储所有分类数据
    activeCategoryId: null, // 当前选中的一级分类ID
    activeSubCategories: [] // 当前选中的一级分类下的二级分类
  },

  onLoad() {
    // 模拟从服务器获取分类数据
    const categories = [
      {
        id: 1,
        name: "电子产品",
        subCategories: [
          { id: 101, name: "手机" },
          { id: 102, name: "电脑" }
        ]
      },
      {
        id: 2,
        name: "服装",
        subCategories: [
          { id: 201, name: "男装" },
          { id: 202, name: "女装" }
        ]
      }
    ];

    this.setData({
      categories,
      activeCategoryId: categories[0].id, // 默认选中第一个分类
      activeSubCategories: categories[0].subCategories
    });
  },

  // 切换一级分类
  switchCategory(e) {
    const categoryId = e.currentTarget.dataset.id;
    const categories = this.data.categories;
    const activeCategory = categories.find(item => item.id === categoryId);

    this.setData({
      activeCategoryId: categoryId,
      activeSubCategories: activeCategory.subCategories
    });
  }
});

3.2 事件处理

在 switchCategory 方法中，我们通过 e.currentTarget.dataset.id 获取到用户点击的一级分类的 ID，然后从 categories 中找到对应的分类数据，并更新 activeSubCategories，从而动态更新右侧的二级分类列表。

4. 总结

通过以上步骤，我们实现了一个简单的商品分类列表功能。用户可以通过点击左侧的一级分类，动态切换右侧的二级分类展示。这种布局方式在电商类小程序中非常常见，能够有效提升用户的浏览体验。

当然，实际项目中可能还需要考虑更多的细节，例如分类数据的动态加载、分类图标的展示、分类下的商品列表等。但通过本文的介绍，你已经掌握了实现商品分类列表的基本思路和方法。