微信小程序中的分类联动

   

最近项目中需要用到这种选择联动  用了微信小程序的原生组件picker

js部分

data里面

   data() {
    return {
      urls: [],
      urlvedio: "",
      storeTypeList: [],
      storeType: "",
      storeTypeId: "",
      storeTypeKey: [],
      categories: [],
      goods_id: "",
      artworkInfo: {}, //商品详情
      guige: [{ guige_name: "", guige_con: "" }]
    };
  },

 bindMultiPickerChange(e) {
      var value = e.mp.detail.value;
      console.log(value);
      var n1 = value[0];
      var n2 = value[1];
      var Sid = this.categories[n1].child[n2].id;
      var name =
        this.categories[n1].name + "-" + this.categories[n1].child[n2].name;
      this.storeTypeId = Sid;
      this.storeType = name;
      this.storeTypeKey = value; //picker选中状态
    },
    bindMultiPickerColumnChange(e) {
      console.log("修改的列为", e.mp.detail.column, "，值为", e.mp.detail.value);
      if (e.mp.detail.column == 0) {
        console.log(this.categories[e.mp.detail.value]);
        var ListTwo = this.categories[e.mp.detail.value].child;
        this.storeTypeList = [this.categories, ListTwo];
        this.storeTypeKey = [e.mp.detail.value, 0];
      }
    },

我这边做的是页面刚开始加载的时候就请求接口

    //商品分类
    init() {
      let that = this;
      wx.request({
        url: baseApiUrl2 + "/api/artwork/categoryList",
        header: {
          "content-type": "application/json"
        },
        method: "post",
        success: function (res) {
          console.log("init", res);
          that.categories = res.data.data;
          var ListOne = that.categories;
          var ListTwo = that.categories[0].child;
          console.log(ListTwo);
          var ListAll = [];
          ListAll.push(ListOne, ListTwo);
          that.storeTypeList = ListAll;
        }
      });
    },