支付寶小程序自定義地區(qū)三級(jí)聯(lián)動(dòng)

場(chǎng)景數(shù)據(jù)結(jié)構(gòu)：

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

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: [], // 區(qū)縣列表
    areaIndex: [0, 0, 0], // 索引
},

// 方法

  // 初始化三級(jí)地區(qū)
  initArea() {
    var self = this;
    // 初始化數(shù)據(jù)
    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
    // 初始化列表數(shù)據(jù)
    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
    })
  },


  // 選擇地址——填充選擇框——填充上傳數(shù)據(jù)
  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òng)地址
  bindMultiPickerColumnChange(e) {
    let self = this
    let newIndexArr = e.detail.value
    // 監(jiān)聽(tīng)第一列
    if (newIndexArr[0] !== self.data.areaIndex[0]) {
      // 滑動(dòng)第一列——初始化第二列和第三列的數(shù)據(jù)
      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
    }

    // 監(jiān)聽(tīng)第二列滑動(dòng)
    if (newIndexArr[1] !== self.data.areaIndex[1]) {
      // 滑動(dòng)第一列——初始化第二列和第三列的數(shù)據(jù)
      let initArr = [newIndexArr[0], newIndexArr[1], 0]
      self.setData({
        areaIndex: initArr,
        districtList: self.data.provinceList[initArr[0]].children[initArr[1]].children
      })
      return
    }

    // 監(jiān)聽(tīng)第三列
    self.setData({
      areaIndex: newIndexArr
    })

  }