Ionicでローディングのポップアップを表示する手順をメモφ(..)
↓イメージはこんな感じです。
手順
Ionicでローディング画面を表示するにはLoadingController
を使用します。
LoadingController
の使い方の概要は下記の通りです。
methods | memo |
---|---|
create | ローディング画面を作成 |
present | ローディング画面を表示 |
dismiss | ローディング画面を非表示化 |
詳細は、下記を参照頂ければ!※Ionicの公式ドキュメントです。
↓Loadingコンポーネントの説明とデモ ionicframework.com
↓LoadingControllerのAPIドキュメント ionicframework.com
今回は、現在開発中のMoook.FrontendでAPIからデータを取得中にローディング画面を表示してみました。
下記がソースコードです。※必要部分だけ抜粋しています。
// ローディング用のモジュールをインポート import { LoadingController } from 'ionic-angular'; @IonicPage() @Component({ selector: 'page-page-index', templateUrl: 'page-index.html', }) export class PageIndexPage { pages = []; result = ''; api_url = 'https://moook.herokuapp.com/pages.json'; loader = null; // コンストラクタでLoadingControllerの変数を宣言 constructor(public navCtrl: NavController, public navParams: NavParams, private http: Http, public loadingCtrl: LoadingController) { // ロード画面を表示 this.presentLoading(); // APIからデータを取得 this.get_pages_data(); } presentLoading() { this.loader = this.loadingCtrl.create({ content: "Please wait...", // 表示する文字列 duration: 3000 // タイムアウト値(自動で消えるまでの時間) }); // ローディング画面を表示 this.loader.present(); } get_pages_data(){ this.http.get(this.api_url).subscribe( respons => { let result = respons.text(); this.pages = []; JSON.parse(result || null).forEach(data => { this.pages.push(new Page(data)); }); if (this.loader != null) { // ローディング画面を非表示 this.loader.dismiss(); } }, error => { let result = 'faild : '+ error.statusText; console.log(result); } ); } }