如何实现一个自定义数据版省市区二级、三级联动
社区可能有其他的方案了,但是再分享下吧,给有需要的童鞋。
效果图:
[图片]
额,这个视频转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的值。
以上就是一个自定义数据版本的省市区二级、三级联动啦,老规矩,结尾放代码片段。
https://developers.weixin.qq.com/s/F9k9cTmT7LAz