微信小程序省市区三级联动（自定义数据版）可扩展为二级联动

刚有老哥问为啥iPhone 11 不支持省市区三级联动，然后让老哥提供了个代码片段。我用iPhone X看了下也跑不起来啊。看了下代码逻辑，只有一个省，只写了一个picker-view-column，这搞个啥三级联动。。。然后老哥说了是抠了一部分代码出来的。既然有问题，那我们还是那句话，有需求，然后能搞出来的，咱就花点时间去搞。

然后给老哥实现了该功能，社区可能有其他的方案了，但是再分享下吧，给有需要的童鞋。

效果图：

效果图.gif

额，这个视频转GIF因为社区上传不了大图，所以剪了一部分，具体的效果还是直接工具打开代码片段预览吧～

上代码

wxml：

<view class="address-item" bindtap="pickAddress">
  <view class="item-title">所在地区</view>
  <view class="item-content arrow {{region ? '' : 'item-content_shadow'  }}">{{region||"请选择"}}</view>
</view>
<pop-up visible="{{visible}}" onClose="closePopUp">
  <view slot="content">
    <view class="picker-view">
      <view class="picker-view__pane">
        <text catchtap="cityCancel">取消</text>
        <text catchtap="citySure">确定</text>
      </view>
      <picker-view class="pick-view__group" bindchange="cityChange" value="{{value}}" wx:key="*this">
        <picker-view-column indicator-class="item_active">
          <view wx:for="{{provinces}}" class="picker-item" wx:key="idnex">{{item.name}}</view>
        </picker-view-column>
        <picker-view-column>
          <view wx:for="{{citys}}" class="picker-item" wx:key="">{{item.name}}</view>
        </picker-view-column>
        <picker-view-column>
          <view wx:for="{{areas}}" class="picker-item" wx:key="">{{item.name}}</view>
        </picker-view-column>
      </picker-view>
    </view>
  </view>
</pop-up>

这里有封装一个自定义组件pop-up，是从下往上弹出的的一个效果，已放到代码片段里了，自行查看即可～

接下来是wxss

.address-item {
  min-height: 98rpx;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-bottom: 1px solid #f1f1f1;
}

.item-title {
  width: 203rpx;
  color: #4d4c4c;
  font-size: 28rpx;
  height: 98rpx;
  line-height: 98rpx;
}
.item-content {
  width: 520rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 28rpx;
  height: 98rpx;
  line-height: 98rpx;
  color: #4d4c4c;
}
/* 地区级联选择器 */

.picker-view {
  width: 100%;
  display: flex;
  background-color: #fff;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  bottom: 0rpx;
  left: 0rpx;
}

.picker-item {
  line-height: 70rpx;
  margin-left: 5rpx;
  margin-right: 5rpx;
  text-align: center;
}

.picker-view__pane {
  height: 100rpx;
  width: 100%;
  padding: 20rpx 32rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
}

.picker-view__pane text{
  color: red;
  font-size: 30rpx;
}

.pick-view__group {
  width: 96%;
  height: 450rpx;
}

呐，接下来还是重点的js处理。

首先我在本地定义了一个city.js，网上下载的。主要是省市区的数据

var provinces = [{
  "name": "北京市",
  "id": "110000"
}, {
  "name": "天津市",
  "id": "120000"
}, {
  "name": "河北省",
  "id": "130000"
}, {
  "name": "山西省",
  "id": "140000"
}, {
  "name": "内蒙古自治区",
  "id": "150000"
}, {
  "name": "辽宁省",
  "id": "210000"
}]

就不放太多了，具体的可以在代码片段里查看，大家可以自定义数据的id，贴合自己的业务场景。

然后是页面js处理

var app = getApp()
var address = require('./city.js')

var app = getApp()
Page({
  data: {
    address: '', //详细收货地址（四级）
    value: [0, 0, 0], // 地址选择器省市区 暂存 currentIndex
    region: '', //所在地区
    regionValue: [0, 0, 0], // 地址选择器省市区 最终 currentIndex
    provinces: [], // 一级地址
    citys: [], // 二级地址
    areas: [], // 三级地址
    visible: false
  },
  onLoad(options) {
    // 默认联动显示北京
    var id = address.provinces[0].id
    this.setData({
      provinces: address.provinces,
      citys: address.citys[id],
      areas: address.areas[address.citys[id][0].id]
    })
  },
  // 提交时由序号获取省市区id
  getRegionId(type) {
    let value = this.data.regionValue
    let provinceId = address.provinces[value[0]].id
    let townId = address.citys[provinceId][value[1]].id
    let areaId
    if (address.areas.length > 0) {
      areaId = address.areas[townId][value[2]].id
    } else {
      areaId = 0
    }

    if (type === 'provinceId') {
      return provinceId
    } else if (type === 'townId') {
      return townId
    } else {
      return areaId
    }
  },
  closePopUp() {
    this.setData({
      visible: false
    })
  },
  pickAddress() {
    this.setData({
      visible: true,
      value: [...this.data.regionValue]
    })
  },
  // 处理省市县联动逻辑 并保存 value
  cityChange(e) {
    var value = e.detail.value
    let {
      provinces,
      citys
    } = this.data
    var provinceNum = value[0]
    var cityNum = value[1]
    var areaNum = value[2]

    if (this.data.value[0] !== provinceNum) {
      var id = provinces[provinceNum].id
      this.setData({
        value: [provinceNum, 0, 0],
        citys: address.citys[id],
        areas: address.areas[address.citys[id][0].id]
      })
    } else if (this.data.value[1] != cityNum) {
      var id = citys[cityNum].id
      this.setData({
        value: [provinceNum, cityNum, 0],
        areas: address.areas[citys[cityNum].id]
      })
    } else {
      this.setData({
        value: [provinceNum, cityNum, areaNum]
      })
    }
  },
  // 点击地区选择取消按钮
  cityCancel(e) {
    this.setData({
      visible: false
    })
  },
  // 点击地区选择确定按钮
  citySure(e) {
    var value = this.data.value
    this.setData({
      visible: false
    })
    // 将选择的城市信息显示到输入框
    try {
      var region =
        (this.data.provinces[value[0]].name || '') +
        (this.data.citys[value[1]].name || '')
      if (this.data.areas.length > 0) {
        region = region + this.data.areas[value[2]].name || ''
      } else {
        this.data.value[2] = 0
      }
    } catch (error) {
      console.log('adress select something error')
    }

    this.setData({
      region: region,
      regionValue: [...this.data.value]
    })
  }
})

以上就是一个自定义数据版本的省市区三级联动啦，老规矩，结尾放代码片段，大家可自行修改代码扩展，可改为二级联动等。

https://developers.weixin.qq.com/s/1hGLDKm17gdW