Cuando desarrollamos un pequeño programa que facilitará el uso de muchos de la ciudad al selector oficial, pero a veces tenemos que escribir su propio conjunto de selectores de la ciudad,
Se seleccionaron las ciudades necesitan Identificación de la ciudad, que se corresponda con el back-end, back-end de procesamiento de conveniencia, no hay mucho que decir sobre el código
En primer lugar, estamos en .wxml
<vista de clase = 'tema'>
所在地区
<selector de modo = "multiselector" bindchange = bindcolumnchange "bindRegionChange" = "bindRegionColumnChange" rango = '{{multiarray}}'>
<texto WX: Si = "{{addressCity}}" > {{addressCity [0]}} {{addressCity [1]}} {{addressCity [2]}} </ text>
<texto wx: clase de otro = 'marcador de posición'>请选择地区</ text>
</ selector >
</ vista>
wxss en
página {background-color: # efeff4;}
.tui-selector de contenido {
padding: 30rpx;
text-align: center;
}
.Tui-selector-nombre {
altura: 80rpx;
line-height: 80rpx;
}
.Tui-selector-detalle {
altura: 80rpx;
line-height: 80rpx;
background-color: #fff;
font-size: 35rpx;
padding: 0 10px;
overflow: hidden;
}
En los Js lógica de escritura
Página ({
Data: {
province_list: null,
province_name: null,
CITY_LIST: null,
CITY_NAME: null,
area_list: null,
AREA_NAME: null,
addressCity: null,
multiarray: [], // el tridimensional de datos de matriz
multiIndex: [0, 0 , 0], // índice predeterminado,
selectProvinceId: null,
selectCityId: null,
selectAreaId: null,
},
onLoad: function (Opciones) {// obtener la página de carga se llama
this.getProvince ()
},
// get lista provincia
getProvince: function () {
let = que el presente
wx.request ({// web petición
URL: '',
datos: {
parentId: 0 // parentId a ser adquiridos por la lista general provincias parentid son 0
},
Éxito (RES) {
la dejó provinceList = [... res.data.data] // en una matriz, que
dejó provinceArr = res.data.data.map ((punto) => { item.name regresar}) // Obtener el nombre
that.setData ({
multiarray: [provinceArr, [], []], // Fin de actualización es actualizar la matriz tridimensional [ [ 'Guangdong', 'Pekín'], [], []]
province_list: provinceList, provinciales // datos en bruto
province_name: provinceArr, // nombre de provincia de todo
})
al dejar que defaultCode = that.data.province_list [0]. Identificación del // como primer parámetro a partir de datos adquiridos municipal
SI (defaultCode) {
that.setData ({
currnetProvinceId: // Guardar la provincia actual defaultCode ID
})
that.getCity (defaultCode) // obtener datos urbanos
}
}
})
}
// obtener Identificación del Departamento de la Ciudad de acuerdo
getCity: function (id) {
SI (id) {
let = que el presente
that.setData ({
currnetProvinceId: id / / provincia es el identificador id obtener ciudad
})
wx.request ({
URL: '',
datos: {
la parentId: id
},
éxito (RES) {
// el console.log (res.data.data)
al dejar que cityArr = RES. data.data.map ((punto) => { item.name regresar}) // devuelve el nombre de la ciudad
deje que CityList = [... res.data.data]
that.setData ({
multiarray: [that.data.province_name, cityArr, [ ]], después de la actualización // [[ 'Guangdong', 'Pekín'], [ 'Chaozhou', 'Shantou', 'Jieyang'], []]
CITY_LIST: CityList // datos que contiene municipal
city_name: // nombre cityArr municipales
})
al dejar que defaultCode that.data.city_list = [0] .id // Obtener los datos de primer nivel distrito de la ciudad
SI (defaultCode) {
that.setData ( {
currentCityId: // defaultCode guardar el ID de ciudad actual
})
that.getArea (defaultCode) // adquiere datos de área
}
}
})
}
}
// obtener el área de
la getArea: function (ID) {
SI (ID) {
let = que el este
that.setData ({
currentCityId: id // salvar la ciudad seleccionada
})
wx.request ({
URL: '',
Datos: {
la parentId: ID
},
Éxito (RES) {
// el console.log (res.data.data)
al dejar que AREALIST = [ res.data.data ...]
al dejar que areaArr res.data.data.map = ((artículo) => item.name volver, para {}) // nombre de la región
that.setData ({
multiarray: [that.data.province_name, that.data.city_name, areaArr],
area_list: AREALIST, // lista de zonas
AREA_NAME: // nombre de zona areaArr
})
}
})
}
},
// Selector de confirmar el área de selección
bindRegionChange: function (E) {
multiIndex: e.detail.value, // actualizar subíndice
// obtener las provincias porque Beijing es sólo una opción, lo que lleva no conseguir Pekín "Beijing" en la una
si (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]] nombre, this.data.city_list [0] .name, this.data. area_list [0] .name],
selectProvinceId:. this.data.province_list [e.detail.value [0]] Identificación,
selectCityId: this.data.city_list [0] .id,
selectAreaId: this.data.area_list [0 ] .ID
})
} else {
this.setData ({
addressCity:.. [this.data.province_list [e.detail.value [0]] nombre, this.data.city_list [e.detail.value [1]] nombre, this.data.area_list [e.detail.value . [2]] nombre],
deje de datos = {
selectProvinceId:. this.data.province_list [e.detail.value [0]] Identificación,
selectCityId:. this.data.city_list [e.detail.value [1]] Identificación,
selectAreaId: this.data.area_list [e. detail.value [2]] ID.
})
}
// console.log (this.data.selectProvinceId, this.data.selectCityId, this.data.selectAreaId)
},
//滑动地区组件
bindRegionColumnChange: function (e) {
// console.log (e.detail.column, e.detail.value)
dejar que eso = esta
columna Let = e.detail.column //当前改变的列
multiIndex: JSON.parse (JSON.stringify (that.data. multiIndex)),
multiarray: JSON.parse (JSON.stringify (that.data.multiArray))
}
data.multiIndex [columna] = e.detail.value // sección se cambia correspondiente a varias columnas de varios multiIndex, actualizar su
interruptor (columna) {
Caso 0: // cambiar la primera columna, el cambio de provincia
dejó currentProvinceId = that.data.province_list [e.detail.value] .id
SI (currentProvinceId! = that.data.currentProvinceId) {// el análisis de identificación actual y no se actualiza
that.getCity (currentProvinceId) // Obtener Identificación del actual en el municipal los datos
}
data.multiIndex = 0 // primero la selección predeterminada de la ciudad [1].
DESCANSO
Caso 1:. // cambiar la segunda columna, el cambio municipal
dejó currentCityId = that.data.city_list [e.detail.value] .id
SI (currentCityId! = that.data.currentCityId) {
PAUSA
}
that.getArea (currentCityId) // Obtener región
}
Data.multiIndex [2] = 0 // predeterminado primera región
that.setData (datos) // datos de actualización
}
})
Tal un simple selector de la ciudad haciendo un buen trabajo