社区可能有其他的方案了，但是再分享下吧，给有需要的童鞋。
效果图：
额，这个视频转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的值。
我把代码复制了 但是js中有报错
Cannot read property '0' of undefined
at Ui.onLoad (user.js? [sm]:20)
at Ui.<anonymous> (VM226 WAService.js:2)
at Ui.o.__callPageLifeTime__ (VM226 WAService.js:2)
at ir (VM226 WAService.js:2)
at VM226 WAService.js:2
at cr (VM226 WAService.js:2)
at a.<anonymous> (VM226 WAService.js:2)
at K.<anonymous> (VM226 WAService.js:2)
at K.emit (VM226 WAService.js:2)
at Object.emit (VM226 WAService.js:2)(env: Windows,mp,1.05.2107090; lib: 2.20.0)
雷霆嘎巴
大佬，想问一下这边设置是什么意思，我在项目中使用时候有时候会无法显示内容，wxml中没有未显示内容的标签，这大概是哪里的问题呢
大佬省市区的数据还有吗可以分享一下吗
大佬，我用你的原生文件复制了下，我更改了index也为组件，然后把index（里面有pop-up组件），拿到页面显示，
，页面显示不出选择的数据.
选到最后一个就报错了
请问数据回显怎么做呀。需求是编辑的时候，需要回显之前选择的省市区。
如图，选择乙方全称后，带出公司地址，做回显。
我这块 修改了一下，然后默认显示北京，在点击北京就是空的，如果选择了别的城市，在选择北京 才可以，大佬有时间的时候，麻烦指导下
请问选中的文字，颜色可以自定义吗？如何自定义呢
onLoad() {// 默认联动显示北京var id = address.provinces[0].id;this.setData({provinces: address.provinces, // 34省citys: address.citys[id], //默认北京市辖区})if (this.data.employmentProvinceName === "" && this.data.employmentCityName === "") {var id = address.provinces[0].id;let employmentProvinceName = address.provinces[0].namelet citys = address.citys[id]let cityId = address.citys[id][0].idlet employmentCity = address.citys[id][0].namethis.setData({provinceId: id,province: employmentProvinceName,city: employmentCity,cityId,provinces: address.provinces, // 34省citys: citys, //默认北京市辖区employmentProvinceName, //省名 vemploymentProvince: id, //省码值 vemploymentCity: cityId, //市 vemploymentCityName: employmentCity, //市码值 v})}},很棒。非常感谢