uni-app,picker实现联机选择器,二列, 后台反时间实现联动

1.实现二级联动

标签内写

  <picker class="item-picker" mode="multiSelector" range-key="name" @change="classifyChange" @columnchange="columnchange" 
  :value="classifyIndex"	:range="classifyArr">
		<view>	{{name}} </view>
  </picker>
 

data内写

                dataSource: [],
				name: "请选择时间",
				classifyArr: [[],[], // picker - 数据源
				classifyIndex: [0, 0], // picker - 索引
				childArr: [], // 二级分类数据源

methods内写

  // 获取数据源并分出一级二级
    getAllClassify() {
    //虚拟的数据
      let newarr = [
        {
          dateTime: "08-19",
          hourTimes: ["下午(15:09-18:00)", "晚上(18:00-20:00)"],
        },
        {
          dateTime: "08-20",
          hourTimes: ["下午(15:09-14:00)", "晚上(17:00-20:00)"],
        },
        {
          dateTime: "08-21",
          hourTimes: ["下午(16:09-18:00)", "晚上(19:00-20:00)"],
        },
        {
          dateTime: "08-23",
          hourTimes: ["下午(15:09-18:00)", "晚上(18:00-20:00)"],
        },
      ];
      let newdata = newarr.map((item, index) => {
        let obj = {};
        obj.id = index + 1;
        obj.name = item.dateTime;
        let child = item.hourTimes.map((item) => {
          let childObj = {};
          obj.id = index + 2;
          childObj.name = item;
          return childObj;
        });
        obj.child = child;
        return obj;
      });
      this.dataSource = newdata;
      for (let i = 0; i < newdata.length; i++) {
        // 将数据源中的二级分类 push 进 childArr，作为二级分类的数据源
        this.childArr.push(newdata[i].child);
      }

      // 一级分类的数据源
      this.classifyArr[0] = newdata;

      // 第一次打开时，默认给一级分类添加它的二级分类
      this.classifyArr[1] = this.childArr[0];
    },

    // 选择商品分类
    classifyChange(e) {
      let value = e.target.value;
      this.classifyIndex = value;
      if (this.classifyArr[0].length != 0) {
        this.name = this.classifyArr[0][this.classifyIndex[0]].name;
        this.pickInfo[2].val = this.name;
      }
      if (this.classifyArr[1].length != 0) {
        this.name += "," + this.classifyArr[1][this.classifyIndex[1]].name;
        this.pickInfo[2].val = this.name;
      }
    },

    // 获取二级分类
    columnchange(e) {
      // 当滚动切换一级分类时，为当前的一级分类添加它的子类
      if (e.detail.column == 0) {
        // #ifdef H5
        // 在小程序中直接赋值无效  H5 可直接赋值
        this.classifyArr[1] = this.childArr[e.detail.value];
        // #endif
        // #ifdef MP-WEIXIN
        // 在 H5 环境下 $set 会导致一级分类无法滚动， 小程序正常运行
        this.$set(this.classifyArr, 1, this.childArr[e.detail.value]);
        // #endif
      }
    },

注意点击切换的时候,选择弹框会自动弹出,
如果需求，要求提货点有数据以后才能选择提货点时间，这里就要之行判断一下