微信小程序如何實現商品分類列表

微信小程序如何實現商品分類列表

在微信小程序中實現商品分類列表是一個常見的需求，尤其是在電商類小程序中。通過合理的分類展示，用戶可以快速找到自己感興趣的商品，提升用戶體驗。本文將介紹如何通過微信小程序實現商品分類列表功能。

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. 總結

通過以上步驟，我們實現了一個簡單的商品分類列表功能。用戶可以通過點擊左側的一級分類，動態切換右側的二級分類展示。這種布局方式在電商類小程序中非常常見，能夠有效提升用戶的瀏覽體驗。

當然，實際項目中可能還需要考慮更多的細節，例如分類數據的動態加載、分類圖標的展示、分類下的商品列表等。但通過本文的介紹，你已經掌握了實現商品分類列表的基本思路和方法。