首先要感謝女票幫我找了這么好用的一個(gè)插件
先上效果圖，效果和ionic2自帶的iOS日期(dateTime)模擬器樣式一樣
傳送門(mén):https://github.com/HsuanXyz/ionic2-city-picker
寫(xiě)的很詳細(xì)扔傅，用法我就不贅述了
有一點(diǎn)要說(shuō)的就是默認(rèn)字體是20px 略顯大痘昌，很多地方顯示不全用...代替了批糟，于是改了下字體和字體模塊的高度
app.scss文件
//省市區(qū)三級(jí)聯(lián)動(dòng)字體
.picker-opt{
font-size: 1.2rem !important;
height: 3.8rem !important;
}
.city-picker-text{
margin-right: .6rem ;
}
———————————— 分割線 ————————————
2018年2月27日更新
調(diào)用高德獲取數(shù)據(jù)赡艰，并且拼接成city-picker組件需要的格式（國(guó)內(nèi)高德暫不支持臺(tái)灣地區(qū)）
注意：這個(gè)組件有個(gè)地方很坑瓢湃，它為三排屬性（省市縣）伟众，那么就必須要三排都有數(shù)據(jù)
如果其中一排沒(méi)有（有些市沒(méi)有縣）析藕，那么選擇了這個(gè)市之后再上下滑動(dòng)進(jìn)行選擇其他的市
就會(huì)發(fā)現(xiàn)第三排數(shù)據(jù)重疊在一起的現(xiàn)象，所以要用判斷凳厢，將所有市的三排數(shù)據(jù)都填滿
this.service.getTown('中國(guó)').subscribe(
data => {
let CityData = [];
let allProvince = data['districts'][0]['districts'];
// console.log(allProvince);
allProvince.forEach((value, index) => {
let tempData = {'name': value.name, 'code': value.adcode, 'children': []};
if (value.name == '臺(tái)灣省') {
tempData.children.push({'name': '臺(tái)灣', 'code': value.adcode, 'children': []});
tempData.children[0]['children'].push({'name': '', 'code': value.adcode});
} else {
value.districts.forEach((value2, index2) => {
tempData.children.push({'name': value2.name, 'code': value2.adcode, 'children': []});
if (value2.districts.length == 0) {
tempData.children[index2]['children'].push({'name': '', 'code': value2.adcode});
} else {
value2.districts.forEach((value3, index3) => {
tempData.children[index2]['children'].push({'name': value3.name, 'code': value3.adcode});
});
}
});
}
CityData.push(tempData);
localStorage.CityData = JSON.stringify(CityData);
});
// console.log(JSON.parse(localStorage.CityData));
}
);
// 高德行政區(qū)域查詢
getTown(params?: any): Observable<any[]> {
return this.http.get('http://restapi.amap.com/v3/config/district?keywords=' + params + '&subdistrict=3&key=' + YOUR_KEY)
.map(this.extractData)
.catch(this.handleError);
}
