微信小程序的省市区三级联动需要使用到的是Picker多列选择器,参考文档:https://www.w3cschool.cn/weix...,
案例中用到的省市区的json文件在文后发出出来。
废话不多说,来看看具体地实现吧。
视图view
<picker class="placeholder" mode="multiSelector"
bindchange="func_changeCitysChange"
bindcolumnchange="func_changeCitysChangeColumn" value="{{ citysIndex }}" range="{{ cityArray }}">
<view class="picker">请选择</view>
</picker>
JS代码
var arrays = common.getAreaInfo();//在头部引入 省市区地址js,这里封装成了方法了。
data:
data: {
citysIndex: [0, 0, 0], //给一个初始值索引,因为有三列,所以3个0
},
onLoad:
onLoad: function(options) {
var that = this;
if (wx.getStorageSync('global_cityData')) {
var cityArray = wx.getStorageSync('global_cityData');
} else {
//定义三列空数组
var cityArray = [
[],
[],
[],
];
for (let i = 0, len = arrays.length; i < len; i++) {
switch (arrays[i]['level']) {
case 1:
//第一列
cityArray[0].push(arrays[i]["name"]);
break;
case 2:
//第二列(默认由第一列第一个关联)
if (arrays[i]['sheng'] == arrays[0]['sheng']) {
cityArray[1].push(arrays[i]["name"]);
}
break;
case 3:
//第三列(默认第一列第一个、第二列第一个关联)
if (arrays[i]['sheng'] == arrays[0]['sheng'] && arrays[i]['di'] == arrays[1]['di']) {
cityArray[2].push(arrays[i]["name"]);
}
break;
}
}
wx.setStorageSync('global_cityData', cityArray);
}
that.setData({
cityArray: cityArray
});
},
下面就是两个事件了
func_changeCitysChange: function(e) {
var that = this;
var cityArray = that.data.cityArray;
var address='';
if (that.data.ssq == undefined){
//下面方法中没有设置ssq,应该给它默认值 ,此时citysIndex相当于[0,0,0]
var citysIndex = that.data.citysIndex;
for (let i in citysIndex) {
address += cityArray[i][citysIndex[i]]
}
}else{
address = that.data.ssq;
}
wx.showModal({
title: '',
content: address+'',
})
},
func_changeCitysChangeColumn: function(e) {
var that = this;
var cityArray = that.data.cityArray;
var list1 = []; //存放第二列数据,即市的列
var list2 = []; //存放第三列数据,即区的列
var citysIndex = [];
//主要是注意地址文件中的字段关系,省、市、区关联的字段有 sheng、di、level
switch (e.detail.column) {
case 0:
//滑动左列
for (let i = 0, len = arrays.length; i < len; i++) {
if (arrays[i]['name'] == cityArray[0][e.detail.value]) {
var sheng = arrays[i]['sheng'];
}
if (arrays[i]['sheng'] == sheng && arrays[i]['level'] == 2) {
list1.push(arrays[i]['name']);
}
if (arrays[i]['sheng'] == sheng && arrays[i]['level'] == 3 && arrays[i]['di'] == arrays[1]['di']) {
list2.push(arrays[i]['name']);
}
}
citysIndex = [e.detail.value, 0, 0];
var ssq = cityArray[0][e.detail.value] + list1[0] + list2[0]+'';
that.setData({
global_sheng: sheng
});
break;
case 1:
//滑动中列
var di;
var sheng = that.data.global_sheng;
list1 = cityArray[1];
for (let i = 0, len = arrays.length; i < len; i++) {
if (arrays[i]['name'] == cityArray[1][e.detail.value]) {
di = arrays[i]['di'];
}
}
for (let i = 0, len = arrays.length; i < len; i++) {
if (arrays[i]['sheng'] == sheng && arrays[i]['level'] == 3 && arrays[i]['di'] == di) {
list2.push(arrays[i]['name']);
}
}
citysIndex = [that.data.citysIndex[0], e.detail.value, 0];
var ssq = cityArray[0][that.data.citysIndex[0]] + list1[e.detail.value] + list2[0] + '';
break;
case 2:
//滑动右列
list1 = cityArray[1];
list2 = cityArray[2];
citysIndex = [that.data.citysIndex[0], that.data.citysIndex[1], e.detail.value];
var ssq = cityArray[0][that.data.citysIndex[0]] + list1[that.data.citysIndex[1]] + list2[e.detail.value] + '';
break;
}
that.setData({
"cityArray[1]": list1,//重新赋值中列数组,即联动了市
"cityArray[2]": list2,//重新赋值右列数组,即联动了区
citysIndex: citysIndex,//更新索引
ssq: ssq,//获取选中的省市区
});
},
用到的省市区js文件,点下面链接。
省市区js文件,点击查看,提取码: xy6v
图片示例
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。