LoadingController

来源：互联网发布：莫宁06年总决赛数据编辑：程序博客网时间：2024/05/29 21:35

一、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: `      <div class="custom-spinner-container">        <div class="custom-spinner-box"></div>      </div>`,    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

0 0