Ionic 加载

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

Ionic 加载器还允许我们使用**消息参数**来显示一条消息，该消息指示进程正在进行。 它还包括一个可选的背景，可以通过在创建时设置属性**showBackdrop: false**来禁用。

Ionic 加载有两个方法：create 和 dismiss，它们将承诺作为回调返回。 让我们逐一了解这些方法。

创建

视觉加载指示器是通过使用**加载控制器**创建的。 我们可以在加载控制器 create() 方法中定义各种加载选项。 自定义**微调器名称**应在 Ionic 加载的微调器选项中传递。

关闭

此方法用于**隐藏**加载器。 它可以在特定时间段后自动关闭，方法是在加载选项中传递持续时间。 如果未在 create 方法中添加时间持续时间选项，则需要调用 dismiss 方法来隐藏加载器。 它还调用**onDidDismiss**函数，用于在加载指示器关闭后执行操作。

我们可以在以下示例中理解这些方法。

在某些情况下，我们可能需要一个单独的**show**和**hide**方法，就像在服务器 API 调用中一样。 我们可以在以下示例中看到这些方法。

Ionic 加载器具有以下选项。

• **消息：**此选项包含在加载器上显示的文本，其中包含微调器。
• **持续时间：**此选项用于提供毫秒级的持续时间以自动隐藏加载器。
• **微调器：**此选项用于更改默认的微调器样式。
• **backDropDismiss：**如果为 true，用户可以通过点击任意位置来关闭加载器。

让我们从下面的示例中了解加载组件在 Ionic 应用程序中的工作原理。

Home.page.html

它是负责用户界面的 HTML 文件。 在此文件中，我们将创建一个事件来显示加载控制器。 为此，我们需要在**<ion-content>**区域内创建一个**button**，以便用户单击该按钮，作为响应，我们将显示加载控制器。

当用户单击该按钮时，它将调用一个函数。 此函数包含一个代码，用于向用户显示加载控制器五秒钟，然后在**五秒钟**后，加载控制器将被关闭。 现在，转到**home.page.ts**文件以创建此函数。

Home.page.ts

如果要使用加载组件，首先**导入**加载控制器。 然后，您需要在该类中创建一个**constructor**，因为它需要在该类中注入加载控制器。 现在，创建一个**showLoading()**函数以向用户显示加载控制器。 在该函数内部，我们必须传递一个 JSON 对象，该对象定义了加载控制器的外观。

接下来，我们需要创建一个**dismiss 函数**来关闭加载控制器，并将**timeout 函数**设置为关闭加载控制器的持续时间。

输出

当您执行上述 Ionic 应用程序时，它将显示以下屏幕。

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

我们还可以使用 await 和 async 以另一种方式编写上述函数。 以下代码对此进行了轻松说明。

我们也可以添加其他 JSON 属性，如下所示。