ionic2 省市县三级联动-原创手记-慕课网

首先要感谢女票帮我找了这么好用的一个插件
先上效果图，效果和ionic2自带的iOS日期(dateTime)模拟器样式一样

700

传送门:https://github.com/HsuanXyz/ionic2-city-picker
写的很详细，用法我就不赘述了

有一点要说的就是默认字体是20px 略显大，很多地方显示不全用...代替了，于是改了下字体和字体模块的高度

app.scss文件

//省市区三级联动字体.picker-opt{
  font-size: 1.2rem !important;
  height: 3.8rem !important;
}
.city-picker-text{
  margin-right: .6rem ;
}

———————————— 分割线 ————————————
2018年2月27日更新
调用高德获取数据，并且拼接成city-picker组件需要的格式（国内高德暂不支持台湾地区）

注意：这个组件有个地方很坑，它为三排属性（省市县），那么就必须要三排都有数据
如果其中一排没有（有些市没有县），那么选择了这个市之后再上下滑动进行选择其他的市
就会发现第三排数据重叠在一起的现象，所以要用判断，将所有市的三排数据都填满

this.service.getTown('中国').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 == '台湾省') {
            tempData.children.push({'name': '台湾', '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));
      }
    );

// 高德行政区域查询
  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);

作者：Jarvan丶
链接：https://www.jianshu.com/p/49dc9ee8cd5e