1.微信小程序官方自带的省市区picker组件
- WXML
<view class="section">
<view class="section__title">省市区选择器</view>
<picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}">
<view class="picker">
当前选择：{{region[0]}}，{{region[1]}}，{{region[2]}}
</view>
</picker>
</view>
- JS
Page({
bindRegionChange: function (e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
region: e.detail.value
})
}
})
- 效果图
省市区级联选择
2.自定义省市街道级联下拉框
微信官方提供的组件已经很方便了，但却无法满足项目中的一些特殊需求；目前公司所在项目的需求是省市区街道的四级级联，并且只展示部分业务需要的省份，市区街道按顺序级联。
- 效果图
- 实现思路
小程序端将用户每次选择的省市区的编码依次传给后台用于查询下级区域（如省编码用于查询对应市信息，依次查询），后台每次会返回对应的编码与地名，然后在js页面中遍历刚刚得到的编码与地名json数据，拼装出2个新的数组，分别作为picker组件的range以及自定义data-xxx的数据来源。
- WXML
Page({
data: {
province: '',
city: '',
district: '',
provinceIndex: 0,
cityIndex: 0,
districtIndex: 0,
provinceCode: '',
cityCode: '',
districtCode: '',
},
onLoad: function (options) {
var that = this
var header = {'content-type' : 'application/json'}
wx.request({
url: 'https://yourserver?parentId=' + '', //查询省信息时parentId为空
method: 'POST',
header: header,
success: function (provinceRes) {
var proRespCode = provinceRes.data.result
if (proRespCode == 500) {
wx.showToast({
title: '服务器繁忙!',
icon: 'loading',
duration: 1500,
})
} else if (proRespCode == 200) {
var provinceArray = []
var provinceCodeArray = []
var cityParentId = provinceRes.data.areacodeInfoList[0].areacode //省编码，用于默认级联查询
for (var iprovince = 0; iprovince < provinceRes.data.areacodeInfoList.length; iprovince++) {
provinceArray[iprovince] = provinceRes.data.areacodeInfoList[iprovince].areaname
provinceCodeArray[iprovince] = provinceRes.data.areacodeInfoList[iprovince].areacode
}
that.setData({
province: provinceArray,
provinceCode: provinceCodeArray,
})
wx.request({
url: 'https://yourserver?parentId=' + cityParentId,
method: 'POST',
header: header,
success: function (cityRes) {
var cityRespCode = cityRes.data.result
if (cityRespCode == 200) {
var cityArray = []
var cityCodeArray = []
var districtParentId = cityRes.data.areacodeInfoList[0].areacode //市编码，用于默认级联查询
for (var icity = 0; icity < cityRes.data.areacodeInfoList.length; icity++) {
cityArray[icity] = cityRes.data.areacodeInfoList[icity].areaname
cityCodeArray[icity] = cityRes.data.areacodeInfoList[icity].areacode
}
that.setData({
city: cityArray,
cityCode: cityCodeArray
})
wx.request({
url: 'https://yourserver?parentId=' + districtParentId,
method: 'POST',
header: header,
success: function (districtRes) {
var districtRespCode = districtRes.data.result
if (districtRespCode == 200) {
var districtArray = []
var districtCodeArray = []
var streetParentId = districtRes.data.areacodeInfoList[0].areacode //区编码 用于默认级联查询
for (var idistrict = 0; idistrict < districtRes.data.areacodeInfoList.length; idistrict++) {
districtArray[idistrict] = districtRes.data.areacodeInfoList[idistrict].areaname
districtCodeArray[idistrict] = districtRes.data.areacodeInfoList[idistrict].areacode
}
that.setData({
district: districtArray,
districtCode: districtCodeArray
})
} else {
wx.showToast({
title: '服务器繁忙!',
icon: 'loading',
duration: 1500,
})
}
}
})
}
}
})
} else {
wx.showToast({
title: '服务器繁忙!',
icon: 'loading',
duration: 1500,
})
}
}
})
},
/**监听省份选择 */
provincePicker: function (e) {
var that = this
var header = { 'content-type': 'application/json' }
//改变index值，通过setData()方法重绘界面
var currentProIndex = e.detail.value
var currentProCode = e.currentTarget.dataset.procode[currentProIndex] //当前省代表的Code,当做查询级联市的parentid
that.setData({
provinceIndex: currentProIndex,
cityIndex: 0,
districtIndex: 0,
})
wx.request({
url: 'https://yourserver?parentId=' + currentProCode,
method: 'POST',
header: header,
success: function (cityRes) {
var cityRespCode = cityRes.data.result
if (cityRespCode == 200) {
var cityArray = []
var cityCodeArray = []
var districtParentId = cityRes.data.areacodeInfoList[0].areacode //市编码，用于默认级联查询
for (var icity = 0; icity < cityRes.data.areacodeInfoList.length; icity++) {
cityArray[icity] = cityRes.data.areacodeInfoList[icity].areaname
cityCodeArray[icity] = cityRes.data.areacodeInfoList[icity].areacode
}
that.setData({
city: cityArray,
cityCode: cityCodeArray
})
wx.request({
url: 'https://yourserver?parentId=' + districtParentId,
method: 'POST',
header: header,
success: function (districtRes) {
var districtRespCode = districtRes.data.result
if (districtRespCode == 200) {
var districtArray = []
var districtCodeArray = []
var streetParentId = districtRes.data.areacodeInfoList[0].areacode //区编码 用于默认级联查询
for (var idistrict = 0; idistrict < districtRes.data.areacodeInfoList.length; idistrict++) {
districtArray[idistrict] = districtRes.data.areacodeInfoList[idistrict].areaname
districtCodeArray[idistrict] = districtRes.data.areacodeInfoList[idistrict].areacode
}
that.setData({
district: districtArray,
districtCode: districtCodeArray
})
} else {
wx.showToast({
title: '服务器繁忙!',
icon: 'loading',
duration: 1500,
})
}
}
})
} else {
wx.showToast({
title: '服务器繁忙!',
icon: 'loading',
duration: 1500,
})
}
}
})
},
/**监听城市选择 */
cityPicker: function (e) {
var that = this
var header = {'content-type' : 'application/json'}
//改变index值，通过setData()方法重绘界面
var currentCityIndex = e.detail.value
var currentCityCode = e.currentTarget.dataset.citycode[currentCityIndex] //当前市代表的Code,当做查询级联区的parentid
that.setData({
cityIndex: currentCityIndex,
districtIndex: 0,
})
wx.request({
url: 'https://yourserver?parentId=' + currentCityCode,
method: 'POST',
header: header,
success: function (districtRes) {
var districtRespCode = districtRes.data.result
if (districtRespCode == 200) {
var districtArray = []
var districtCodeArray = []
var streetParentId = districtRes.data.areacodeInfoList[0].areacode //区编码 用于默认级联查询
for (var idistrict = 0; idistrict < districtRes.data.areacodeInfoList.length; idistrict++) {
districtArray[idistrict] = districtRes.data.areacodeInfoList[idistrict].areaname
districtCodeArray[idistrict] = districtRes.data.areacodeInfoList[idistrict].areacode
}
that.setData({
district: districtArray,
districtCode: districtCodeArray
})
} else {
wx.showToast({
title: '服务器繁忙!',
icon: 'loading',
duration: 1500,
})
}
}
})
},
/**监听市区选择 */
districtPicker: function (e) {
var that = this
//改变index值，通过setData()方法重绘界面
var currentdistrictIndex = e.detail.value
var currentdistrictCode = e.currentTarget.dataset.councode[currentdistrictIndex] //当前区代表的Code,当做查询级联街道的parentid
that.setData({
districtIndex: currentdistrictIndex,
})
}
})
本文只是提供一个小程序端的解决思路，需要完整实现还需要后台数据的支持，以下是小程序在github上的地址：