Ionic加载

本文概述

• 创建
• 解雇

加载会创建一个叠加层, 该叠加层可用于阻止其他用户互动。加载指示器显示在内容区域的顶部。该应用可以将其关闭, 以恢复用户与该应用的交互。当某些过程正在进行时, 我们可以显示加载程序的视觉指示, 例如从服务器或文件副本获取数据, 粘贴事件等。加载程序在应用程序中非常有用。从用户的角度来看, 它使应用程序更加方便。

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, 则用户可以通过点击任意位置来关闭加载程序。

让我们从下面的示例中查看加载组件在Ionic应用程序中的工作方式。

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应用程序时, 它将显示以下屏幕。

现在, 当你单击显示加载按钮时, 它将开始显示加载指示。五秒钟后, 它将消失。

我们还可以使用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();
}