支付寶小程序自定義地(dì / de)區三級聯動

場景數據結構：

[{
      "id": 110000,
      "name": "北京市",
      "children": [{
        "id": "110100",
        "name": "北京市",
        "children": [{
            "id": "110101",
            "name": "東城區"
          }]
      }]
}]

view

<popup show="{{showArea}}" position="bottom" onClose="onPopupClose">
	<view class="pop-flex">
		<view onTap="onPopupClose">取消</view>
		<view onTap="bindMultiPickerChange" class="confirm">确定</view>
	</view>
	<view>
		<picker-view value="{{areaIndex}}" onChange="bindMultiPickerColumnChange" class="mypicker">
			<!-- 省 -->
			<picker-view-column>
				<block a:for="{{provinceList}}">
					<view key="{{item.id}}">{{item.name}}</view>
				</block>
			</picker-view-column>
			<!-- 市 -->
			<picker-view-column>
				<block a:for="{{cityList}}">
					<view key="{{item.id}}">{{item.name}}</view>
				</block>
			</picker-view-column>
			<!-- 縣 -->
			<picker-view-column>
				<block a:for="{{districtList}}">
					<view key="{{item.id}}">{{item.name}}</view>
				</block>
			</picker-view-column>
		</picker-view>
	</view>
</popup>

js

data:{
    areaAddress: '',
    provinceList: [], // 省份列表
    cityList: [], // 市縣列表
    districtList: [], // 區縣列表
    areaIndex: [0, 0, 0], // 索引
},

// 方法

  // 初始化三級地(dì / de)區
  initArea() {
    var self = this;
    // 初始化數據
    let initIndex = self.data.areaIndex
    let provinceId, cityId, areaId, provinceName, cityName, areaName
    provinceId = areaList.data[initIndex[0]].id
    provinceName = areaList.data[initIndex[0]].name
    cityId = areaList.data[initIndex[0]].children[initIndex[1]].id
    cityName = areaList.data[initIndex[0]].children[initIndex[1]].name
    areaId = areaList.data[initIndex[0]].children[initIndex[1]].children[initIndex[2]].id
    areaName = areaList.data[initIndex[0]].children[initIndex[1]].children[initIndex[2]].name
    // 初始化列表數據
    self.setData({
      'form.province': provinceId,
      'form.city': cityId,
      'form.area': areaId,
      areaAddress: provinceName + cityName + areaName,
      provinceList: areaList.data,
      cityList: areaList.data[0].children,
      districtList: areaList.data[0].children[0].children
    })
  },


  // 選擇地(dì / de)址——填充選擇框——填充上(shàng)傳數據
  bindMultiPickerChange() {
    let self = this
    let initIndex = self.data.areaIndex
    let provinceId, cityId, areaId, provinceName, cityName, areaName
    provinceId = self.data.provinceList[initIndex[0]].id
    provinceName = self.data.provinceList[initIndex[0]].name
    cityId = self.data.provinceList[initIndex[0]].children[initIndex[1]].id
    cityName = self.data.provinceList[initIndex[0]].children[initIndex[1]].name
    areaId = self.data.provinceList[initIndex[0]].children[initIndex[1]].children[initIndex[2]].id
    areaName = self.data.provinceList[initIndex[0]].children[initIndex[1]].children[initIndex[2]].name

    self.setData({
      'form.province': provinceId,
      'form.city': cityId,
      'form.area': areaId,
      areaAddress: provinceName + cityName + areaName,
      showArea: false
    })
  },

  // 滑動地(dì / de)址
  bindMultiPickerColumnChange(e) {
    let self = this
    let newIndexArr = e.detail.value
    // 監聽第一列
    if (newIndexArr[0] !== self.data.areaIndex[0]) {
      // 滑動第一列——初始化第二列和(hé / huò)第三列的(de)數據
      let initArr = [newIndexArr[0], 0, 0]
      self.setData({
        areaIndex: initArr,
        cityList: self.data.provinceList[initArr[0]].children,
        districtList: self.data.provinceList[initArr[0]].children[0].children
      })
      return
    }

    // 監聽第二列滑動
    if (newIndexArr[1] !== self.data.areaIndex[1]) {
      // 滑動第一列——初始化第二列和(hé / huò)第三列的(de)數據
      let initArr = [newIndexArr[0], newIndexArr[1], 0]
      self.setData({
        areaIndex: initArr,
        districtList: self.data.provinceList[initArr[0]].children[initArr[1]].children
      })
      return
    }

    // 監聽第三列
    self.setData({
      areaIndex: newIndexArr
    })

  }