微信小程序实现三级分类选择

要实现微信小程序中的三级分类选择，需要进行以下步骤：

创建三级分类数据

首先需要创建三级分类数据，可以使用JSON格式来存储数据。例如：

{
  "category": [
    {
      "name": "食品",
      "subCategory": [
        {
          "name": "饮料",
          "subCategory": [
            {
              "name": "碳酸饮料"
            },
            {
              "name": "果汁"
            }
          ]
        },
        {
          "name": "零食",
          "subCategory": [
            {
              "name": "薯片"
            },
            {
              "name": "巧克力"
            }
          ]
        }
      ]
    },
    {
      "name": "电子产品",
      "subCategory": [
        {
          "name": "手机",
          "subCategory": [
            {
              "name": "苹果"
            },
            {
              "name": "华为"
            }
          ]
        },
        {
          "name": "电脑",
          "subCategory": [
            {
              "name": "笔记本"
            },
            {
              "name": "台式机"
            }
          ]
        }
      ]
    }
  ]
}

创建页面结构

在小程序中创建一个页面，用于显示分类选择器。在页面中创建一个picker-view组件，用于显示三级分类选择器。例如：

<view>
  <picker-view bindchange="categoryChange" style="height: 300px;">
    <picker-view-column wx:for="{{categories}}" wx:key="{{item.name}}">
      <view class="picker-item">{{item.name}}</view>
    </picker-view-column>
  </picker-view>
</view>

加载数据

在页面的onLoad方法中加载分类数据，并将数据存储到页面数据中。例如：

Page({
  data: {
    categories: null,
    categoryIndex: [0, 0, 0]
  },
  onLoad: function () {
    var data = require('data.js');
    this.setData({
      categories: data.category
    });
  },
  ...
})

实现分类的选择

在页面中实现bindchange事件的处理函数categoryChange，用于响应分类选择器的变化。在事件处理函数中，获取当前选择的分类索引，更新页面数据中的分类索引，在页面中显示当前选择的分类。例如：

Page({
  ...
  categoryChange: function (e) {
    var categoryIndex = e.detail.value;
    this.setData({
      categoryIndex: categoryIndex
    });
    var category = this.getCategory(categoryIndex);
    console.log(category);
  },
  getCategory: function (categoryIndex) {
    var categories = this.data.categories;
    var category = categories[categoryIndex[0]];
    category = category.subCategory[categoryIndex[1]];
    category = category.subCategory[categoryIndex[2]];
    return category;
  }
})

在getCategory方法中，根据当前分类索引获取当前选择的分类对象。

显示当前选择的分类

在页面中显示当前选择的分类。例如：

<view>
  <picker-view bindchange="categoryChange" style="height: 300px;">
    <picker-view-column wx:for="{{categories}}" wx:key="{{item.name}}" value="{{categoryIndex[0]}}">
      <view class="picker-item">{{item.name}}</view>
    </picker-view-column>
    <picker-view-column wx:for="{{categories[categoryIndex[0]].subCategory}}" wx:key="{{item.name}}" value="{{categoryIndex[1]}}">
      <view class="picker-item">{{item.name}}</view>
    </picker-view-column>
    <picker-view-column wx:for="{{categories[categoryIndex[0]].subCategory[categoryIndex[1]].subCategory}}" wx:key="{{item.name}}" value="{{categoryIndex[2]}}">
      <view class="picker-item">{{item.name}}</view>
    </picker-view-column>
  </picker-view>
  <view>当前选择：{{category.name}}</view>
</view>

在picker-view-column组件中，使用value属性绑定当前分类的索引，以便在页面中显示当前选择的分类。在页面底部显示当前选择的分类