小程序类别联动选择（二级类别）

<view class="weui-cell__bd">
       <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" range-key="name" range="{{brands}}">
           <view class="weui-select weui-select_in-select-after">
                        {{bigname}}-{{smallname}}</view>
       </picker>
</view>

类别选择，雷同于省市选择，但是有不同的地方是，有些大类下面没有小类。这就是需要注意的难点。

js代码，首选定义变量。

"bigs": [],   //大类类别数组

"smalls":[],    //小类类别数组

"bigid":0,     //大类类别编号

"smallid":0, //小类类别编号

"bigname":'',   //大类类别名称  

"smallname":'',     //小类类别名称

定义完了变量之后，就是在onload里面请求接口，返回数据。

app.apphttp(wx.request)({
        url: app.globalData.url + 'api/category/getcats',
        method: 'POST',
        header: {'content-type': 'application/x-www-form-urlencoded'},
        data: {},
    }).then(function (res2) {
        const bigs = [[], []];
        const smalls = [[], []];
        that.setData({
            tempdata: res2.data.data
        });
        
        for (let i = 0; i < res2.data.data.length; i++) {
            var obj = new Object;
            obj.itemid = res2.data.data[i].itemid;
            obj.name = res2.data.data[i].name;
            bigs[0].push(obj);
        }
        
        for (let i = 0; i < res2.data.data[0].cats.length; i++) {
            var obj = new Object;
            obj.itemid = res2.data.data[0].smalls[i].itemid;
            obj.name = res2.data.data[0].smalls[i].name;
            bigs[1].push(obj);
        } 

        that.setData({
            'bigs': bigs,
            'smalls': smalls,
            'bigname': '',//res2.data.data[0].name,
            'smallname': res2.data.data[0].smalls.length>0?res2.data.data[0].smalls[0].name:''    //小类的名称默认是大类的第一个子类名称
        });
        
        
    }).catch(function (error) {
        console.log(error);
    });

下面是最关键的，选择大类之后，再选择大类下面的一个小类。

bindMultiPickerChange: function (e) {
    //console.log(this.data.provinceid);//获取了省份编号
    //console.log(this.data.cityid);//获取了城市编号
  },
  bindMultiPickerColumnChange: function (e) {
    var that = this;
    switch (e.detail.column) {
      case 0:
        //当选择了大类的时候
        that.setData({
          "bigs[1]": that.data.tempdata[e.detail.value].smalls,
          "bigname": that.data.tempdata[e.detail.value].name,
          "bigid": that.data.tempdata[e.detail.value].itemid,
          "smallname": that.data.tempdata[e.detail.value].smalls.length > 0 ? that.data.tempdata[e.detail.value].cats[0].name:'',
          "smallid": that.data.tempdata[e.detail.value].smalls.length > 0 ? that.data.tempdata[e.detail.value].cats[0].itemid:0,
        });
        break;
      case 1:
        //当选择了小类以后
        that.setData({
          "smallname": that.data.brands[1][e.detail.value].name,
          "smallid": that.data.brands[1][e.detail.value].itemid 
        });
    }
    // console.log(that.data.brandid); console.log('||');
    // console.log(that.data.catid);
  },