小程序三级联动结合vant weap（有赞）的picker选择器和popup弹出层

小程序三级联动结合vant weap（有赞）的picker选择器和popup弹出层

首先看数据结构

做的是地址联动和工种联动，数据结构基本相同

只贴一种地址联动的代码就好，用的比较多

  
addressList: function() {
//这个就是接口拿到地址数据
    resume.addressList().then(res => {
        this.setData({
          areaList: res.data[0].childSRegion
        });
        var areaList = this.data.areaList;
        this.setData({
          columns22: [
            {
              values: areaList,
              className: 'column1'
            },
            {
              values: areaList[0].childSRegion,
              className: 'column2',
              defaultIndex: 0
            },
            {
              values: areaList[0].childSRegion[0].childSRegion,
              className: 'column3',
              defaultIndex: 0
            }
          ]
        });
//单独开一个setData放三级联动的结构，里面只放这一关数组，不要再放其他的了（否则错都查不到）values里面放第一级到第三级，className这个就没太所谓，defaultIndex：初始选中项的索引，默认为 0

      })
      .catch(res => {});
  },

 

json里面要引需要用到的vant的组件，例如这样，地址根据自己装的地址去配置

{
  "usingComponents": {
    "van-field": "/miniprogram_npm/vant-weapp/field/index",
    "van-picker": "/miniprogram_npm/vant-weapp/picker/index",
    "van-popup": "/miniprogram_npm/vant-weapp/popup/index"
  },
      "navigationBarTitleText": "地址联动"
}

wxml代码

这个里面就放了一个输入框，一个popup层，一个picker

      <van-field value="{{ regionValue  }}" label="工作城市" placeholder="选择工作城市" border="{{ false }}" readonly class="form-input-item" right-icon="arrow" icon="arrow" bindtap="showPopup22" />
      <van-popup show="{{show22}}" position="bottom">
        <van-picker show-toolbar title="请选择工作城市" columns="{{ columns22 }}" value-key="name" bind:change="onChange22" bind:confirm="onConfirm22" bind:cancel="onCancel" />
      </van-popup>

js事件

  //展示popup层//把名称初始给三级联动第一个//id也对应三级联动的第一个//这里即：北京/北京市/东城区
  showPopup22: function() {
    this.setData({
      regionValue1:this.data.areaList[0].name +'/' + this.data.areaList[0].childSRegion[0].name +'/' + this.data.areaList[0].childSRegion[0].childSRegion[0].name,
      region1: this.data.areaList[0].childSRegion[0].childSRegion[0].id,
      show22: true
    });
  },
//选择改变监听//对应picker里面的选项改变时触发//改变第一级同时会改变第二级和第三级
  onChange22(event) {
    console.log(event);
    const { picker, value, index } = event.detail;

    if (event.detail.index === 0) {
      picker.setColumnValues(1, value[0].childSRegion);
      picker.setColumnValues(2, value[0].childSRegion[0].childSRegion);
      this.setData({
        regionValue1: value[0].name+'/'+ value[0].childSRegion[0].name+'/'+value[0].childSRegion[0].childSRegion[0].name,
        region1: value[0].childSRegion[0].childSRegion[0].id
        })
//这个setData的是滑动第一级时触发，这改变了第一级的数值，并不会改变后面的数值，setDate//每一层在setData是有必要的，不然名称和id可能传的并非想要选中的，可以实时console.log(event)查看里面的值对应上
    } else if (event.detail.index === 1) {
      picker.setColumnValues(2, value[1].childSRegion);
      this.setData({
        regionValue1: value[0].name+'/'+value[1].name+'/'+ value[1].childSRegion[0].name,
        region1: value[1].childSRegion[0].id
        })

    } else if (event.detail.index == 2) {
      picker.setColumnValues(2, value[1].childSRegion);
      this.setData({
        regionValue1: value[0].name+'/'+value[1].name+'/'+ value[2].name,
        region1: value[2].id
        })
    }

//setData里面更新索引所对应的名称和id//毕竟自己显示用名称，给后台要给对应的id
  },
//工作城市确定//确定只是用来明确显示用的名称和可能需要给后台的id（毕竟上面一步只是改变，没有确定，还不能给他赋值）//确定了就要关闭popup层了，该拿到的都已经拿到了
  onConfirm22: function() {
    this.setData({
      regionValue: this.data.regionValue1,
      region: this.data.region1
    });
    this.onCancel();
  },
// 关闭popup层
   onCancel() {
      this.setData({
        show22: false
      });
    },