微信小程序三级联动
- 参考 https://www.jianshu.com/p/f096febc6e45
wxml
1
2
3
4
5
6
7
8
9
10
11
12<view>
<view class='inpText_require'>省市区</view>
<view class="inp">
<picker mode="multiSelector" bindchange="bindRegionChange"
bindcolumnchange="bindRegionColumnChange" range='{{multiArray}}'>
<view class="weui-input" wx:if="{{addressCity}}">
{{addressCity[0]}} > {{addressCity[1]}} > {{addressCity[2]}}</view>
<view class="holder-input" wx:else>请选择省市区</view>
</picker>
</view>
</view>
<view>js
- 平常写的方法随意找个地方写就可以和生命周期同级
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188Page({
data:{
province_list: null,
province_name: null,
city_list: null,
city_name: null,
area_list: null,
area_name: null,
addressCity: null,
multiArray: [], // 三维数组数据
multiIndex: [0, 0, 0], // 默认的下标,
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (option) {
this.provinceData(); //源省份数据
},
//源省份数据
provinceData:function(){
var self = this;
wx.showLoading({
title: '加载中',
});
wx.request({
url: urlList.findProvinceCode,
method: 'GET',
data: {},
header: {
'content-type': 'application/json' // 默认值
},
success(res) {
if (res.statusCode == 200){
wx.hideLoading();
let provinceList = [...res.data]; //放到一个数组里面
let provinceArr = res.data.map((item) => { return item.provinceName }) ; //获取名称
self.setData({
//更新三维数组 更新完为[['广东','北京'],[],[]]
multiArray: [provinceArr, [], []],
province_list: provinceList, //省级原始数据
province_name: provinceArr, //省级全部名称
});
//使用第一项当作参数获取市级数据
let defaultCode = self.data.province_list[0].provinceCode
if (defaultCode) {
self.setData({
currnetProvinceId: defaultCode //保存当前省份id
})
self.getCity(defaultCode) //获取市区数据
}
}else{
wx.showToast({
title: '暂无数据',
icon: 'none',
duration: 2000
});
wx.hideLoading();
}
}
})
},
//源市区数据
getCity: function (provinceCode){
var self = this;
self.setData({
currnetProvinceId:provinceCode
});
wx.request({
url: urlList.findCityCode,
method: 'GET',
data: {
proCode: provinceCode
},
header: {
'content-type': 'application/json' // 默认值
},
success(res) {
if (res.statusCode == 200) {
let cityArr = res.data.map((item) => { return item.cityName }) //返回城市名称
let cityList = [...res.data];
self.setData({
//更新后[['广东','北京'],['潮州'，'汕头','揭阳'],[]]
multiArray: [self.data.province_name, cityArr, []],
city_list: cityList, //保持市级数据
city_name: cityArr //市级名称
});
//获取第一个市的区级数据
let defaultCode = self.data.city_list[0].cityCode;
if (defaultCode) {
self.setData({
currentCityId: defaultCode //保存当下市id
});
self.getArea(defaultCode) //获取区域数据
}
} else {
wx.showToast({
title: '暂无数据',
icon: 'none',
duration: 2000
});
}
}
})
},
//区数据
getArea: function (cityCode){
let self = this;
self.setData({
currentCityId: cityCode //保存当前选择市
});
wx.request({
url: urlList.findAreaCode,
method: 'GET',
data: {
cityCode: cityCode
},
header: {
'content-type': 'application/json' // 默认值
},
success(res) {
if (res.statusCode == 200) {
let areaList = [...res.data];
let areaArr = res.data.map((item) => { return item.areaName }) //区域名
self.setData({
multiArray: [self.data.province_name, self.data.city_name, areaArr],
area_list: areaList, //区列表
area_name: areaArr //区名字
});
} else {
wx.showToast({
title: '暂无数据',
icon: 'none',
duration: 2000
});
}
}
})
},
//picker确认选择地区
bindRegionChange: function (e) {
if (e.detail.value[1] == null || e.detail.value[2] == null) {
this.setData({
multiIndex: e.detail.value, //更新下标
addressCity: [this.data.province_list[e.detail.value[0]].provinceName, this.data.city_list[0].cityName, this.data.area_list[0].areaName],
selectProvinceId: this.data.province_list[e.detail.value[0]].provinceCode,
selectCityId: this.data.city_list[0].cityCode,
selectAreaId: this.data.area_list[0].areaCode
})
}else{
this.setData({
multiIndex: e.detail.value, //更新下标
addressCity: [this.data.province_list[e.detail.value[0]].provinceName, this.data.city_list[e.detail.value[1]].cityName, this.data.area_list[e.detail.value[2]].areaName],
selectProvinceId: this.data.province_list[e.detail.value[0]].provinceCode,
selectCityId: this.data.city_list[e.detail.value[1]].cityCode,
selectAreaId: this.data.area_list[e.detail.value[2]].areaCode
});
}
},
//滑动地区组件
bindRegionColumnChange: function (e) {
let self = this
let column = e.detail.column //当前改变的列
let data = {
multiIndex: JSON.parse(JSON.stringify(self.data.multiIndex)),
multiArray: JSON.parse(JSON.stringify(self.data.multiArray))
};
//第几列改变了就是对应multiIndex的第几个，更新他
data.multiIndex[column] = e.detail.value;
switch (column) {
case 0: //第一列改变，省级改变
let currentProvinceId = self.data.province_list[e.detail.value].provinceCode;
if (currentProvinceId != self.data.currentProvinceId) { //判断当前id是不是更新了
self.getCity(currentProvinceId) //获取当前id下的市级数据
}
data.multiIndex[1] = 0 //将市默认选择第一个
break
case 1: //第二列改变，市级改变
let currentCityId = self.data.city_list[e.detail.value].cityCode;
if (currentCityId != self.data.currentCityId) {
self.getArea(currentCityId) //获取区域
}
data.multiIndex[2] = 0 //区域默认第一个
break
}
self.setData(data) //更新数据
},
});
