我々は公式のセレクタに市の多くの使用を促進する小さなプログラムを開発し、時には我々はセレクタ市の独自のセットを記述する必要がある場合には、
私たちは、コードの上に、バックエンド、バックエンド処理の利便性に対応するように、都市は都市のIDが必要に言っても過言ではないを選択しました
まず、我々は.wxmlであります
<ビュークラス= 'アイテム'>
所在地区
<ピッカーモード= "multiSelector" bindchange = "bindRegionChange" bindcolumnchange = "bindRegionColumnChange"範囲= '{{マルチアレイ}}'>
<テキストWX：もし= "{{addressCity}}" > {{addressCity [0]}}、{{addressCity [1]}}、{{addressCity [2]}} </テキスト>
<テキストWX：他のクラス= 'プレースホルダ'>请选择地区</テキスト>
</ピッカー>
</ビュー>
wxssで
ページ{背景色：＃efeff4;}
.tuiピッカーコンテンツ{
パディング：30rpx。
テキスト整列：センター;
}
.tuiピッカー名{
高さ：80rpx。
行の高さ：80rpx。
}
.tuiピッカーディテール{
高さ：80rpx。
行の高さ：80rpx。
背景色：#FFF;
フォントサイズ：35rpx。
パディング：0 10pxの;
オーバーフロー：隠されました;
}
書き込みロジックでの.js
ページ（{
データ：{
province_list：ヌル、
province_name：ヌル、
city_list：ヌル、
CITY_NAME：nullは、
ヌルを：area_list
AREA_NAME：ヌル、
addressCity：ヌル、
マルチアレイ：[] // 3次元配列データ
マルチインデックス：[0、0を、0]、//デフォルトインデックス、
selectProvinceId：ヌル、
selectCityId：ヌル、
selectAreaId：NULL、
}
のonLoad：機能（オプション）{//が負荷にページが呼び出され得る
this.getProvince（）
}
// GET州リスト
getProvince：機能（）{
LET =、この
wx.request（{// Web要求の
URL： ''、
データ：{
PARENTID：0 // PARENTID一般リスティングPARENTID省によって取得される0である
}、
成功（RES）{
LET provinceList = [... res.data.data] //配列に
provinceArr =せres.data.data.map（（アイテム）=> { item.nameを返す}）//の名前取得
that.setData（{
マルチアレイ：//エンド更新は、三次元アレイを更新する[provinceArr、[]、[]]です[ [ '広東'、 '北京']、[]、[]]
province_list：provinceList、//地方生データ
province_name：provinceArr、//すべての地方名
}）
させdefaultCode = that.data.province_list [0]。第一パラメータ取得市町村データとしてID //使用
IF（defaultCode）{
that.setData（{
//現在の省保存のID defaultCode：currnetProvinceId
}）
that.getCity（defaultCode）//取得し、都市データ
}
}
}）
}
に従って//取得ID市科
getCityを：機能（ID）{
IF（ID）{
LET =このこと
that.setData（{
currnetProvinceId：ID / /州は、ID番号が都市得るある
}）
（{wx.request
：、 'URLを
データ：{
PARENTID：ID
}、
成功（RES）{
//はconsole.log（res.data.data）
させcityArr = RES。 data.data.map（（アイテム）=> { item.nameを返す}）//は、 都市の名前を返す
LET CityList = [... res.data.data]
that.setData（{
マルチアレイ：[that.data.province_name、cityArr、[ ]]、 // [[ '広東省'、 '北京']、[ '潮州'、 '汕頭'、 '掲陽']、[]]更新後
city_list：CityList //データ自治体保持
cityArr //市町村名：CITY_NAMEを
}）
させdefaultCode that.data.city_list = [0] .ID //最初の都市地区レベルデータを取得
IF（defaultCode）{
that.setData（ {
currentCityId：現在の都市のID保存defaultCode //
}）
that.getArea（defaultCode）//がエリアデータを取得する
}
}
}）
}
}
//面積を得る
のgetArea：機能（ID）{
IF（ID）{
letのこと、これは=
that.setData（{
currentCityId：現在選択されている都市のセーブID //
）}
wx.request（{
URL： ''、
データ：{
PARENTID：ID
}、
成功（RES）{
//はconsole.log（res.data.data）
しましょうareaList = [ res.data.data ...]
LETはareaArr res.data.data.map = //領域名（（項目）=> {}ため、item.nameを返す）
that.setData（{
[that.data.province_name：マルチアレイthat.data.city_name、areaArr]、
area_list：areaList、//ゾーンリスト
AREA_NAME：areaArr //ゾーン名
}）
}
}）
}
}、
//ピッカー確認選択エリア
bindRegionChange：関数（E）{
マルチインデックス：e.detail.value、//更新添字
北京は唯一の選択肢であるため、//は州を取得し、北京"北京"を取得していない大手のA
IF（e.detail.value [1] == NULL || e.detail.value [2] == NULL）{//如果只滚动了第一列则选取第一列的第一数据
this.setData（ {
マルチインデックス：e.detail.value、//更新下标
addressCity：[this.data.province_list [e.detail.value [0]名、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
}）
}他{
this.setData（{
addressCity：[this.data.province_list [e.detail.value [0]名、this.data.city_list [e.detail.value [1]。名前、this.data.area_list [e.detail.value [2]。名]、
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）
}
//滑动地区组件
bindRegionColumnChange：機能（E）{
//にconsole.log（e.detail.column、e.detail.value）
それはこの=ましょう
= letの列をe.detail.column //当前改变的列
{=データを聞かせ
マルチインデックス：（that.data JSON.parse（JSON.stringify。マルチインデックス））、
マルチアレイ：JSON.parse（JSON.stringify（that.data.multiArray））
}
data.multiIndex [列] = e.detail.value //セクション彼の更新、いくつかのマルチインデックスのいくつかの列に対応して変更される
スイッチ（列）{
ケース0：//最初の列を変更し、地方の変更は
せcurrentProvinceId = that.data.province_list [e.detail.value] .ID
IF（currentProvinceId！= that.data.currentProvinceId）{//更新されていない現在のIDを分析
that.getCity（currentProvinceId）は自治体の中で、現在のIDを取得します//データ
}
data.multiIndex = 0 //最初のデフォルトの選択市[1]
BREAK
ケース1：// 2番目の列を変更する、自治体の変更は
せcurrentCityId = that.data.city_list [e.detail.value] .ID
IF（currentCityId！= that.data.currentCityId）{
BREAK
}
that.getArea（currentCityId）//ゲット地域
}
Data.multiIndex [2] = 0 //デフォルトの最初の領域
that.setData（データ）//更新データ
}
}）
良い仕事をしているような、単純なセレクタの都市