本文概述
- 创建
- 解雇
Ionic加载程序还允许我们使用message参数显示一条消息, 该消息指示进程正在进行。它还包括一个可选的背景, 可以通过设置属性showBackdrop：创建时禁用false来禁用它。
Ionic加载有两种方法：create和dismiss, 它们将promise作为回调返回。让我们一一理解这些方法。
创建 视觉加载指示器是通过使用加载控制器创建的。我们可以在加载控制器create()方法中定义各种加载选项。自定义微调器名称应在Ionic加载的微调器选项中传递。
解雇 此方法用于隐藏加载程序。通过传递加载选项的持续时间, 可以在特定时间后自动将其关闭。如果在create方法中未添加time duration选项, 则需要调用dismiss方法来隐藏加载程序。它还消除了加载指示器后调用onDidDismiss函数执行操作。
在下面的示例中我们可以理解这些方法。
showAutoHideLoader() {
this.loadingCtrl.create({
message: 'This Loader Will Auto Hide in five Seconds', duration: 5000
}).then((res) =>
{
res.present();
res.onDidDismiss().then((dis) =>
{
console.log('Loading dismissed! after five Seconds');
});
});
}在某些情况下, 我们可能需要像服务器API调用中那样具有单独的show和hide方法。在下面的示例中, 我们可以看到这些方法。
showLoader() {
this.loaderToShow = this.loadingCtrl.create({
message: 'This Loader will Not AutoHide'
}).then((res) =>
{
res.present();
res.onDidDismiss().then((dis) =>
{
console.log('Loading dismissed!');
});
});
this.hideLoader();
}
hideLoader() {
setTimeout(() =>
{
this.loadingCtrl.dismiss();
}, 4000);
}
}Ionic装载机具有以下选项。
- 消息：此选项包含带有旋转器的在加载器上显示的文本。
- 持续时间：此选项用于指定自动隐藏加载程序的持续时间（以毫秒为单位）。
- 微调器：此选项用于更改默认微调器样式。
- backDropDismiss：如果为true, 则用户可以通过点击任意位置来关闭加载程序。
Home.page.html
负责用户界面的是HTML文件。在此文件中, 我们将创建一个事件以显示加载控制器。为此, 我们需要在< ion-content> 区域内创建一个按钮, 以便用户单击该按钮, 作为响应, 我们将显示加载控制器。
当用户单击按钮时, 它将调用一个函数。此功能包含一个代码, 用于向用户显示加载控制器五秒钟, 五秒钟后, 将关闭加载控制器。现在, 转到home.page.ts文件以创建此功能。
<
ion-header>
<
ion-toolbar color="light">
<
ion-title>
Ionic Loading<
/ion-title>
<
/ion-toolbar>
<
/ion-header>
<
ion-content fullscreen class="ion-padding">
<
ion-button expand="block" color="danger" (click)="showLoading()">
Show Loading<
/ion-button>
<
/ion-content>
Home.page.ts
如果要使用加载组件, 请首先导入加载控制器。然后, 你需要在类内创建一个构造函数, 因为需要将加载控制器注入到类内。现在, 创建一个showLoading()函数向用户显示加载控制器。在函数内部, 我们必须传递JSON对象, 该对象定义加载控制器的外观。
接下来, 我们需要创建一个dismiss函数来关闭加载控制器, 并将超时功能设置为关闭加载控制器的持续时间。
import { Component } from '@angular/core';
import { LoadingController } from '@ionic/angular';
@Component({
selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'], })
export class HomePage {
loaderToShow: any;
constructor(public loadingCtrl: LoadingController) {}
showLoading() {
this.loadingCtrl.create({
message: 'Loading...'
}).then((loading) =>
{
loading.present();
setTimeout(() =>
{
loading.dismiss();
}, 5000 );
});
}
}输出：
【Ionic加载】当你执行上述Ionic应用程序时, 它将显示以下屏幕。
文章图片
现在, 当你单击显示加载按钮时, 它将开始显示加载指示。五秒钟后, 它将消失。
文章图片
我们还可以使用await和async以另一种方式编写上述函数。下面的代码很容易解释这一点。
async showLoading() {
const loading = await this.loadingCtrl.create({
message: 'Loading...'
});
loading.present();
setTimeout(() =>
{
loading.dismiss();
}, 5000 );
}我们还可以如下添加其他JSON属性。
async showLoading() {
const loading = await this.loadingCtrl.create({
message: 'Loading...', duration: 5000, showBackdrop: false, spinner: 'lines'
});
loading.present();
}
