小程序picker组件封装省市

如果你遇到选择 ”省市“ 的需求，请试一下我这个方法。

先在Component里创建个公共组件，名字随意起。比如 city-selection   参考一下就行   哈哈哈哈哈

上代码！

这是父组件的展示

省市的数据要处理成这种方式，要在每个市后面加上省的名字。处理方式如下

 [
    ["江苏省", "安徽省", "浙江省", "广东省", "云南省", "广西壮族自治区", "天津市", "福建省", "江西省"],
    [{ cityName: "南京市", code: "江苏省" },
      { cityName: "镇江市", code: "江苏省" },
      { cityName: "徐州市", code: "江苏省" },
      { cityName: "南通市", code: "江苏省" },
      { cityName: "泰州市", code: "江苏省" },
      { cityName: "无锡市", code: "江苏省" },
      { cityName: "合肥市", code: "安徽省" },
      { cityName: "嘉兴市", code: "浙江省" },
      { cityName: "宁波市", code: "浙江省" },
      { cityName: "台州市", code: "浙江省" },
      { cityName: "舟山市", code: "浙江省" },
      { cityName: "绍兴市", code: "浙江省" },
      { cityName: "杭州市", code: "浙江省" },
      { cityName: "金华市", code: "浙江省" },
      { cityName: "温州市", code: "浙江省" },
      { cityName: "湖州市", code: "浙江省" },
      { cityName: "丽水市", code: "浙江省" },
      { cityName: "衢州市", code: "浙江省" },
      { cityName: "中山市", code: "广东省" },
      { cityName: "深圳市", code: "广东省" },
      { cityName: "珠海市", code: "广东省" },
      { cityName: "汕头市", code: "广东省" },
      { cityName: "佛山市", code: "广东省" },
      { cityName: "东莞市", code: "广东省" },
      { cityName: "汕尾市", code: "广东省" },
      { cityName: "广州市", code: "广东省" },
      { cityName: "云浮市", code: "广东省" },
      { cityName: "揭阳市", code: "广东省" },
      { cityName: "阳江市", code: "广东省" },
      { cityName: "湛江市", code: "广东省" },
      { cityName: "江门市", code: "广东省" },
      { cityName: "惠州市", code: "广东省" },
      { cityName: "清远市", code: "广东省" },
      { cityName: "梅州市", code: "广东省" },
      { cityName: "肇庆市", code: "广东省" },
      { cityName: "河源市", code: "广东省" },
      { cityName: "潮州市", code: "广东省" },
      { cityName: "韶关市", code: "广东省" },
      { cityName: "茂名市", code: "广东省" },
      { cityName: "昆明市", code: "云南省" },
      { cityName: "曲靖市", code: "云南省" },
      { cityName: "丽江市", code: "云南省" },
      { cityName: "保山市", code: "云南省" },
      { cityName: "普洱市", code: "云南省" },
      { cityName: "楚雄彝族自治州", code: "云南省" },
      { cityName: "西双版纳傣族自治州", code: "云南省" },
      { cityName: "红河哈尼族彝族自治州", code: "云南省" },
      { cityName: "昭通市", code: "云南省" },
      { cityName: "文山壮族苗族自治州", code: "云南省" },
      { cityName: "钦州市", code: "广西壮族自治区" },
      { cityName: "河池市", code: "广西壮族自治区" },
      { cityName: "玉林市", code: "广西壮族自治区" },
      { cityName: "防城港市", code: "广西壮族自治区" },
      { cityName: "南宁市", code: "广西壮族自治区" },
      { cityName: "桂林市", code: "广西壮族自治区" },
      { cityName: "北海市", code: "广西壮族自治区" },
      { cityName: "柳州市", code: "广西壮族自治区" },
      { cityName: "天津市", code: "天津市" },
      { cityName: "福州市", code: "福建省" },
      { cityName: "厦门市", code: "福建省" },
      { cityName: "泉州市", code: "福建省" },
      { cityName: "宁德市", code: "福建省" },
      { cityName: "南昌市", code: "江西省" },
      { cityName: "吉安市", code: "江西省" },
      { cityName: "上饶市", code: "江西省" },
      { cityName: "九江市", code: "江西省" }]
    ]

  多列选择器
  
     {{multiArray[0][multiIndex[0]]}}/{{multiArray[1][multiIndex[1]]}} 
  

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    province: {
      type: String,
    },
    city: {
      type: String,
    },
    list: {
      type: Array,
      value: []
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    multiIndex: [0, 0],
    multiArray: [[], []],
  },

  /**
   * 组件的方法列表
   */
  methods: {
    bindMultiPickerChange(e) {
      let { value } = e.detail
      // 传入得省份 
      let province = this.data.multiArray[0][value[0]]
      // 传入得市区
      let city = this.data.multiArray[1][value[1]]

      this.triggerEvent('myevent', province + '/' + city)

      this.setData({ multiIndex: value })
    },

    bindMultiPickerColumnChange(e) {
      let { column, value } = e.detail
      // 传入得省份 
      let province = this.data.list[0][value]
      // 传入得市区
      let cityList = this.data.list[1]
      let selectList = []
      if (column == 0) {
        // 这里循环一边是要拿到市的参数  我是没想到啥办法不循环
        cityList.forEach((item, index) => {
          if (item.code == province) {
            selectList.push(item.cityName)
          }
        })
        this.pickerHandle(province, selectList[0])
      }
    },

    pickerHandle(label, value) {
      // 接收处理过得省市
      let list = this.data.list

      let pIndex = ''
      let cIndex = ''
      let selectList = []
      let provinceList = list[0]
      let cityList = list[1]

      // 查询带有 省的市区
      cityList.forEach((item, index) => {
        if (item.code == label) {
          selectList.push(item.cityName)
        }
      })

      // 查询出省的下标
      pIndex = provinceList.indexOf(label)
      // 查询出市的下标
      cIndex = selectList.indexOf(value)

      // 如果没有查到  默认展示第一个省 第一个市
      if (cIndex == '-1') {
        pIndex = 0
        cIndex = 0
        cityList.forEach((item, index) => {
          if (item.code == provinceList[0]) {
            selectList.push(item.cityName)
          }
        })
        wx.showToast({
          title: '您当前城市不支持投保',
          icon: "none"
        })
      }

      this.data.multiArray[0] = provinceList
      this.data.multiArray[1] = selectList

      this.setData({ multiIndex: [pIndex, cIndex], multiArray: this.data.multiArray })
    },
  },
  lifetimes: {
    ready: function () {
      // 传入得省份 
      let province = this.data.province
      // 传入得市区
      let city = this.data.city

      // 必须要传入省市的名字
      // 如果传入的不是省市的名字  会默认展示第一个省市
      this.pickerHandle(province, city)

    },

  },
})