下載地址：https://github.com/hhjjj1010/ionic3-area-picker-demo.git

demo基于ionic的tabs模板，ionic start MyApp tabs。

生成地區(qū)選擇modal頁面以及ts和scss文件，ionic generate page area-modal --no-module。

--no-module：generate命令的參數(shù)，根據(jù)字面意思也能猜出來，不生成module。在實(shí)際項(xiàng)目中根據(jù)實(shí)際情況來選擇是否生成module來實(shí)現(xiàn)模塊封裝。

在demo中使用了modal來完成地區(qū)的選擇，主要是為了方便反向傳值。

viewCtrl傳值給modalCtrl屬于正向傳值，通過構(gòu)造函數(shù)即可完成。
modalCtrl傳值給viewCtrl屬于反向傳值，通過dismiss(data)完成。

    //在viewCtrl 中
    // viewCtrl正向傳值給modalCtrl
    let modal = this.modalCtrl.create(AreaModalPage, {params: this.selectedAreaData}); 
     modal.onDidDismiss(data => {
     // viewCtrl接收到modalCtrl反向傳值的處理
     if (data) {
        this.selectedAreaData = data;
      }
    });

    // 在modalCtrl中反向傳值
    this.viewCtrl.dismiss(this.selectedArea);

生成provider，提供Http服務(wù)，ionic generate provider area-modal。

在demo中，地區(qū)數(shù)據(jù)并不是從遠(yuǎn)端服務(wù)器中獲取的，讀取的是存放在項(xiàng)目中的area.json文件。
在實(shí)際開發(fā)中，http.get("遠(yuǎn)端url")即可獲取遠(yuǎn)端服務(wù)器上的數(shù)據(jù)。
area.json文件存放到www目錄中才能被訪問到。以此推理，其他資源文件比如項(xiàng)目中的圖標(biāo)文件或許也該放到www目錄中去。

自定義頭部導(dǎo)航條

在modal頁面使用<ion-header>+<ion-toolbar>自定義頂部導(dǎo)航條
第一個(gè)<ion-toolbar>用于顯示頁面title和close按鈕
第二個(gè)<ion-toolbar>用于顯示已選中的地區(qū)信息

    <ion-header>
      <ion-toolbar>
        <ion-title>選擇地區(qū)</ion-title>
        <ion-buttons left>
          <button ion-button (click)="dismiss()" icon-only>
            <ion-icon name="close"></ion-icon>
          </button>
        </ion-buttons>
      </ion-toolbar>
      <ion-toolbar>
        <ion-row>
        <ion-col *ngFor="let data of selectedArea; let i = index">
          <button ion-button full small clear (click)="doSwitchAreaAction(i)">{{data.text}}</button>
        </ion-col>
        </ion-row>
      </ion-toolbar>
    </ion-header>

地區(qū)選擇頁面未實(shí)現(xiàn)滑動(dòng)效果（可繼續(xù)優(yōu)化）