社区可能有其他的方案了，但是再分享下吧，给有需要的童鞋。
效果图：
额，这个视频转GIF因为社区上传不了大图，所以剪了一部分，具体的效果还是直接工具打开代码片段预览吧～
第一步：你的页面JSON引入该组件：
{
"usingComponents": {
"city-picker": "/components/cityPicker/index"
}
}
第二步：你的页面WXML引入该组件
<city-picker visible="{{visible}}" column="2" bind:close="handleClick" bind:confirm="handleConfirm" />
第三步：你的页面JS调用
// 显示/隐藏picker选择器
handleClick() {
this.setData(
visible: !this.data.visible
})
},
// 用户选择城市后 点击确定的返回值
handleConfirm(e) {
const {
detail: {
provinceName = '',
provinceId = '',
cityName,
cityId='',
areaName = '',
areaId = ''
} = {}
} = e
this.setData({
cityId,
cityName,
areaId,
areaName,
provinceId,
provinceName
})
}
组件属性
| 属性 | 默认值 | 描述 |
|---|---|---|
| visible | false | 是否显示picker选择器 |
| column | 3 | 显示几列，可选值：1，2，3 |
| values | [0, 0, 0] | 必填，默认回填的省市区下标，可选择具体省市区后查看AppData的regionValue字段 |
| close | function | 点击关闭picker弹窗 |
| confirm | function | 点击选择器的确定返回值 |
confirm:
| 属性 | 默认值 | 描述 |
|---|---|---|
| provinceName | 北京市 | 省份名称 |
| provinceId | 110000 | 省份ID |
| cityName | 市辖区 | 城市名称 |
| cityId | 110100 | 城市ID |
| areaName | 东城区 | 区域名称 |
| areaId | 110000 | 区域Id |
至于怎么获取你想默认城市的下标，可以滑动操作下选中省市区后，点击确定后查看appData里的regionValue的值。
不知道为毛帖子收藏不了
// 默认联动显示北京
var id = address.provinces[18].id
this.setData({
provinces: address.provinces, // 34省
citys: address.citys[id], //默认北京市辖区
areas: address.areas[address.citys[id][0].id],
value: [18, 0, 5],
regionValue: [18, 0, 5],
})
},
您好！初始进入页面时点击选择地址，地址选择器点取消，再点选择地址，选默认确定，北京的地址无法正常显示，如果初始页面点击选择地址，地址选择器点确定可以正常显示北京的地址，这算是一个BUG
您好！请问点击外面取消弹窗怎么实现？类似于于原生picker的bindcancel()方法
又是一个摩拜小弟
您好，数据源能提供一下吗？
[{
"code": "129"
"name": "北京市"
"children": [{
"code": "8285"
"countyList": null
}]
}, {
"code": "130"
"name": "天津市"
"children": [{
"code": "7926"
"name": "天津市"
}]
}]
有时候哦我们的省市区格式是这样的，这种咋用啊
习惯了，见到大佬的文章，不由自主会先赞后收藏