小程序 省市两级pickerView

使用

// 注意被点击的组件的slot与组件的slot相同
<addressPicker slotName="address" selectRegion="{{selectRegion}}" bind:getSelectedAddress="getSelectedAddress">
  <view slot="address"></view>
</addressPicker>

源文件

js文件

// components/addressPicker/index.js
Component({

  /**
   * 启用插槽
   */
  options: {
    multipleSlots: true
  },

  /**
   * 组件的属性列表
   */
  properties: {
    // 插槽名
    slotName: {
      type: String,
      value: ''
    },
    // 选中的省市index
    selectRegin:{
      type:Array,
      value: [0, 0]
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    
    regionList: [{
      name: '山东省',
      id: 1,
      code: 201,
      city: [{
        name: '潍坊市',
        id: 4,
        code: 301
      }, {
        name: '济南市',
        id: 5,
        code: 302
      }, {
        name: '德州市',
        id: 6,
        code: 303
      }]
    }, {
      name: '河北省',
      id: 2,
      code: 202,
      city: [{
        name: '保定市',
        id: 4,
        code: 301
      }, {
        name: '石家庄市',
        id: 5,
        code: 302
      }, {
        name: '雄安市',
        id: 6,
        code: 303
      }]
    }, {
      name: '黑龙江省',
      id: 3,
      code: 203,
      city: [{
        name: '长春市',
        id: 4,
        code: 301
      }, {
        name: '哈尔滨市',
        id: 5,
        code: 302
      }, {
        name: '四平市',
        id: 6,
        code: 303
      }]
    }],

    
  },

  /**
   * 组件的方法列表
   */
  methods: {
    /**
     * 点击确定
     */
    onRegionChange: function(e) {
      console.log(e);

      let regions = e.detail.value;

      let province = this.data.regionList[regions[0]]
      let data = {
        selectRegin: regions,
        province: province,
        city: province.city[regions[1]].name
      }
      this.triggerEvent("getSelectedAddress", data)

    },
    /**
     * 数据滚动
     */
    bindcolumnchange: function(e) {
      let column = e.detail.column;
      let value = e.detail.value;
      let selectRegion = this.data.selectRegin;
      
      if (column == 0) {

        selectRegion[0] = value;
        selectRegion[1] = 0;

        this.setData({
          selectRegin: selectRegion,
        })
      }
    },
  },


})

wxml文件

<picker mode="multiSelector" bindchange="onRegionChange" value="{{selectRegin}}" range="{{[regionList, regionList[selectRegin[0]].city]}}" range-key='name' bindcolumnchange='bindcolumnchange'>
<slot name="{{slotName}}"></slot>
</picker>

其他文件均为空。