LoadingController

一、LoadingController可以用来弹出一个窗口来阻止用户交互,加载图标将会加载在app内容之上,他包括一个可选的背景,可以通过设置showBackdrop:false来禁用。


二、创建

你可以把所有参数都闯入create(opt)方法,spinner name必须是spinner属性,或者是其他可选HTML选项可以传进content属性,如果你没有传参数spinner的话loading会根据mode替你指定,在app的config中设置loadingSpinner的值,如果要隐藏spinner,可以使用

在config中loadingSpinner: 'hide'或者在loading的可选参数中传入spinner: 'hide'

三、取消

这个loading可以通过传入duration来设置自动取消,默认情况下可以通过设置dismissOnPageChange为true来使他在页面切换时自动消失,在创建完loading之后,可以通过dismiss()来取消他。onDidDismiss方法会在loading消失时被回调。


注意:在组件消失之后该组件就不能再使用了,必须要再重新创建一个,这可以避免显示一个重复的功能。


三、限制

这个组件显示在别的组件之上是根据z-index属性设置的,你必须确保其他组件没有设置比这更高的z-index。


四、使用

constructor(public loadingCtrl: LoadingController) {

}

presentLoadingDefault() {
  let loading = this.loadingCtrl.create({
    content: 'Please wait...'
  });

  loading.present();

  setTimeout(() => {
    loading.dismiss();
  }, 5000);
}

presentLoadingCustom() {
  let loading = this.loadingCtrl.create({
    spinner: 'hide',
    content: `
      
`, duration: 5000 }); loading.onDidDismiss(() => { console.log('Dismissed loading'); }); loading.present(); } presentLoadingText() { let loading = this.loadingCtrl.create({ spinner: 'hide', content: 'Loading Please Wait...' }); loading.present(); setTimeout(() => { this.nav.push(Page2); }, 1000); setTimeout(() => { loading.dismiss(); }, 5000); }


五、属性

1、create(option)

(1)spinner


(2)content

loading的html内容样式


(3)cssClass


(4)showBackdrop


(5)dismissOnPageChange

当跳转到一个新页面时,是否会关闭当前loading,默认为false


(6)duration


你可能感兴趣的:(Ionic2)