When we develop a small program that will facilitate the use of many of the city to the official selector, but sometimes we need to write their own set of selectors city,
We selected cities need city id, to correspond to the back-end, back-end processing convenience, not much to say, on the code
First, we are in .wxml
<view class='item'>
Region
<picker mode="multiSelector" bindchange="bindRegionChange" bindcolumnchange="bindRegionColumnChange" range='{{multiArray}}'>
<text wx:if="{{addressCity}}">{{addressCity[0]}} {{addressCity[1]}} {{addressCity[2]}}</text>
<Text wx: else class = 'placeholder'> Select Area </ text>
</picker>
</view>
wxss in
page{background-color: #efeff4;}
.tui-picker-content{
padding: 30rpx;
text-align: center;
}
.tui-picker-name{
height: 80rpx;
line-height: 80rpx;
}
.tui-picker-detail{
height: 80rpx;
line-height: 80rpx;
background-color: #fff;
font-size: 35rpx;
padding: 0 10px;
overflow: hidden;
}
In the write logic .js
Page({
data: {
province_list: null,
province_name: null,
city_list: null,
city_name: null,
area_list: null,
area_name: null,
addressCity: null,
multiArray: [], // the three-dimensional data array
multiIndex: [0, 0, 0], // default index,
selectProvinceId: null,
selectCityId: null,
selectAreaId: null,
},
onLoad: function (options) {// get the page to load on call
this.getProvince()
},
// Get the list of provinces
getProvince: function () {
let that = this
wx.request ({// web request
url: '',
data:{
parentId: 0 // provinces to get to this list by parentId general parentId are 0
},
success(res) {
let provinceList = [... res.data.data] // into an array which
let provinceArr = res.data.data.map ((item) => {return item.name}) // Get the name
that.setData({
multiArray: [provinceArr, [], []], // update the three-dimensional arrays have updated to [[ 'Guangdong', 'Beijing'], [], []]
province_list: provinceList, // provincial raw data
province_name: provinceArr, // name of all provincial
})
let defaultCode [0] .id // = that.data.province_list used as the first parameter obtaining municipal data
if (defaultCode) {
that.setData({
currnetProvinceId: defaultCode // Save the current provinces id
})
that.getCity (defaultCode) // get data Downtown
}
}
})
},
// id get the provinces according to city
getCity: function (id) {
if(id){
let that = this
that.setData({
currnetProvinceId: id // This is the id id obtain province city
})
wx.request({
url: '',
data: {
parentId: id
},
success(res) {
// console.log(res.data.data)
let cityArr = res.data.data.map ((item) => {return item.name}) // Returns the city name
let cityList = [...res.data.data]
that.setData({
multiArray: [that.data.province_name, cityArr, []], after the update // [[ 'Guangdong', 'Beijing'], [ 'Chaozhou', 'Shantou', 'Jieyang'], []]
city_list: cityList, // to keep municipal data
city_name: cityArr // municipal name
})
let defaultCode = that.data.city_list [0] .id // get the first data of a city district
if (defaultCode) {
that.setData({
currentCityId: defaultCode // save the current City id
})
that.getArea (defaultCode) // data acquisition area
}
}
})
}
},
// get the area
getArea: function (id) {
if(id){
let that = this
that.setData({
currentCityId: id // save the currently selected city
})
wx.request({
url: '',
data: {
parentId: id
},
success(res) {
// console.log(res.data.data)
let areaList = [...res.data.data]
let areaArr = res.data.data.map ((item) => {return item.name}) // area name
that.setData({
multiArray: [that.data.province_name, that.data.city_name, areaArr],
area_list: areaList, // zone list
area_name: areaArr // zone name
})
}
})
}
},
// picker to confirm the selection area
bindRegionChange: function (e) {
// get provinces because Beijing is only one option, leading not get Beijing "Beijing" first
if (e.detail.value [1] == null || e.detail.value [2] == null) {// If only the first column of the first scroll data of the first column is selected
this.setData({
multiIndex: e.detail.value, // update subscript
addressCity: [this.data.province_list[e.detail.value[0]].name, this.data.city_list[0].name, this.data.area_list[0].name],
selectProvinceId: this.data.province_list[e.detail.value[0]].id,
selectCityId: this.data.city_list[0].id,
selectAreaId: this.data.area_list[0].id
})
} else {
this.setData({
multiIndex: e.detail.value, // update subscript
addressCity: [this.data.province_list[e.detail.value[0]].name, this.data.city_list[e.detail.value[1]].name, this.data.area_list[e.detail.value[2]].name],
selectProvinceId: this.data.province_list[e.detail.value[0]].id,
selectCityId: this.data.city_list[e.detail.value[1]].id,
selectAreaId: this.data.area_list[e.detail.value[2]].id
})
}
// console.log(this.data.selectProvinceId,this.data.selectCityId,this.data.selectAreaId)
},
// slide assembly area
bindRegionColumnChange: function (e) {
// console.log(e.detail.column,e.detail.value)
let that = this
let column = e.detail.column // change the current column
let data = {
multiIndex: JSON.parse(JSON.stringify(that.data.multiIndex)),
multiArray: JSON.parse(JSON.stringify(that.data.multiArray))
}
data.multiIndex [column] = e.detail.value // The first change is the corresponding columns multiIndex the first of several, he updated
switch (column) {
case 0: // the first column changes, changes in provincial
let currentProvinceId = that.data.province_list[e.detail.value].id
if (currentProvinceId! = that.data.currentProvinceId) {// Analyzing current id is not updated
that.getCity (currentProvinceId) // get the id under the current municipal data
}
data.multiIndex [1] = 0 // will select the first default city
break
case 1: // change the second column, municipal change
let currentCityId = that.data.city_list[e.detail.value].id
if (currentCityId != that.data.currentCityId) {
that.getArea (currentCityId) // acquisition area
}
data.multiIndex [2] = 0 // default first region
break
}
that.setData (data) // update data
},
})
Such a simple selector city doing a good job