本文实例为大家分享了支付宝小程序实现省市区三级联动的具体代码，供大家参考，具体内容如下
背景
最近做的项目 有省市区联动。不仅要传name还要把对应的id发给后台。
支付宝提供的级联有 my.multiLevelSelect 和picker并不能满足需求。
picker 组件不支持多列选择，所以使用 picker-view 组件和Popup配合使用。
实现效果图
数据结构
citys – 城市 areas – 区
当然这是处理之后的，行政区划树 不长这样子。
[{
code:1,
name:'北京',
areas:[
{
code: 101,
name:'朝阳区'
在支付宝小程序中，实现省市区三级联动功能是一个常见的需求，特别是在需要用户选择详细地址的场景下。由于支付宝小程序的内置组件my.multiLevelSelect和picker不能完全满足这种需求，因此需要自定义实现。本文将详细介绍如何利用picker-view组件和Popup组件来达到这个目的。
我们需要了解数据结构。在示例中，数据结构被设计为一个嵌套的JSON对象，包含城市（citys）和区域（areas）两个属性。例如：
```json
[
{
"code": 1,
"name": "北京",
"areas": [
{
"code": 101,
"name": "朝阳区"
},
{
"code": 102,
"name": "丰台区"
}
]
},
{
"code": 2,
"name": "河北省",
"citys": [
{
"code": 20,
"name": "石家庄市",
"areas": [
{
"code": "201",
"name": "长安区"
}
]
}
]
}
]
```
接下来是页面的HTML部分，使用了popup组件来显示选择器，并结合picker-view组件展示每个级别的选项。当用户选择时，会触发`bindMultiPickerColumnChange`事件。
```html
<popup show="{{showBottom}}" position="bottom" onClose="onPopupClose" className="cityPop">
<view class="flex">
<view onTap="onPopupClose">取消</view>
<view onTap="bindMultiPickerChange" class="confrim">确定</view>
</view>
<view>
<picker-view value="{{multiIndex}}" onChange="bindMultiPickerColumnChange" class="mypicker">
<block wx:for="{{multiArray}}">
<picker-view-column key="{{index}}">
<block wx:for="{{item}}" wx:for-item="colItem">
<view key="{{colItem.code}}">{{colItem.name}}</view>
</block>
</picker-view-column>
</block>
</picker-view>
</view>
</popup>
```
在JavaScript部分，我们处理选择事件并更新multiArray和multiIndex。`bindMultiPickerColumnChange`函数用于监听picker-view的滚动选择。当用户滚动选择时，根据当前选择的省、市、区，动态更新multiArray中的数据，确保每一级都有正确的选项。
```javascript
// 滚动选择
bindMultiPickerColumnChange(e) {
let newColums = e.detail.value;
let { multiIndex } = this.data;
// 处理直辖市和自治区的情况
let newMultiIndex = [newColums[0], 0, 0];
// 根据选择更新multiIndex
// ... 更新逻辑 ...
var data = {
multiArray: this.data.multiArray,
multiIndex: newMultiIndex
};
// 根据multiIndex更新数据
// ... 更新逻辑 ...
this.setData(data);
}
```
在这个过程中，需要注意直辖市和自治区与普通省份的区别，因为它们的层级结构不同。直辖市没有城市（citys）层级，直接是省到区（areas）。因此，需要特殊处理这种情况，确保数据的正确填充。
当用户确认选择后，可以获取到multiArray和multiIndex的值，这些值包含了用户选择的省、市、区的ID和名称，从而满足了既要传回name又要传回对应ID的需求。
总结来说，实现支付宝小程序省市区三级联动的关键在于理解数据结构，动态更新picker-view的选项，并处理直辖市和自治区的特殊情况。通过自定义组件和事件监听，可以构建出一个灵活且符合需求的联动选择器。
