Ionic微调器 _Ionic微调器

本文概述

暂停微调器
设定时间
设置微调框

Ionic微调器组件提供了多个SVG微调器。微调框是视觉指示器, 指示应用程序正在加载内容或正在执行其他过程, 以便用户需要等待。
不同平台的默认微调器不同。例如, iOS应用程序具有默认的Spinner行, 而android应用程序具有默认的Spinner月牙。如果平台不是iOS也不是android, 则默认Spinner将为新月形。我们可以使用标准的< ion-spinner> 组件来访问Ionic Spinner。
例
本示例说明了在Ionic应用程序中使用默认微调器。

< ion-header> < ion-toolbar color="light"> < ion-title> Ionic Spinner< /ion-title> < /ion-toolbar> < /ion-header> < ion-content fullscreen class="ion-padding"> < ion-spinner> < /ion-spinner> < /ion-content>

【Ionic微调器】输出：
当你执行以上代码片段时, 将提供以下输出。在这里, 你可以看到默认的微调器加载, 即一行。

文章图片
注意：我们还可以使用属性名称更改默认的Spinner。以下示例说明了Ionic应用程序中使用的不同类型的Spinner。例

< ion-header> < ion-toolbar color="light"> < ion-title> Ionic Spinner< /ion-title> < /ion-toolbar> < /ion-header> < ion-content fullscreen class="ion-padding"> Lines < ion-spinner name="lines"> < /ion-spinner> Line Small < ion-spinner name="lines-small"> < /ion-spinner> Dots < ion-spinner name="dots"> < /ion-spinner> Bubbles < ion-spinner name="bubbles"> < /ion-spinner> Circles < ion-spinner name="circles"> < /ion-spinner> Crescent < ion-spinner name="crescent"> < /ion-spinner> < /ion-content>

输出：

文章图片
暂停微调器 Ionic Spinner还允许我们使用一个属性来暂停Spinner组件的动画。默认情况下, paused属性为false。如果为true, 则将暂停Spinner动画。以下示例有助于更清楚地理解它。
例
在此示例中, 我们将属性设置为在圆形微调器中暂停。

< ion-header> < ion-toolbar color="light"> < ion-title> Ionic Spinner< /ion-title> < /ion-toolbar> < /ion-header> < ion-content fullscreen class="ion-padding"> Bubbles < ion-spinner name="bubbles"> < /ion-spinner> Circles < ion-spinner name="circles" paused> < /ion-spinner> Crescent < ion-spinner name="crescent"> < /ion-spinner> < /ion-content>

输出：
当上面的代码执行时, 你将获得以下输出。在这里, 你可以看到圆微调器将被暂停。

文章图片
设定时间 Ionic还允许我们设置Spinner组件的持续时间。这意味着到达设置的时间时, 微调器组件的视觉负载指示将消失。
例
Home.page.html

< ion-header> < ion-toolbar color="light"> < ion-title> Ionic Spinner< /ion-title> < /ion-toolbar> < /ion-header> < ion-content fullscreen class="ion-padding"> Lines < ion-spinner *ngIf="show"> < /ion-spinner> Dots < ion-spinner name="dots"> < /ion-spinner> Circles < ion-spinner name="circles"> < /ion-spinner> < /ion-content>

Home.page.ts
在这里, 我们为Spinner组件设置了超时时间。

import { Component } from '@angular/core'; @Component({ selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'], }) export class HomePage { show = true; constructor() { setTimeout (() => { this.show = false; }, 3000 ); } }

输出：
当你执行以上代码片段时, 将提供以下输出。

文章图片
每当达到你设置的时间限制时, 旋转微调器加载的视觉指示就会消失。我们可以在下图中看到它。

文章图片
设置微调框我们还可以为Spinner组件设置不同的样式或颜色。以下示例说明了Spinner组件内部不同颜色样式的使用。
例

< ion-header> < ion-toolbar color="light"> < ion-title> Ionic Spinner< /ion-title> < /ion-toolbar> < /ion-header> < ion-content fullscreen class="ion-padding"> Crescent < ion-spinner name="crescent" color="dark"> < /ion-spinner> Dots < ion-spinner name="dots" color="danger"> < /ion-spinner> Circles < ion-spinner name="circles" color="success"> < /ion-spinner> < /ion-content>

输出：
当你运行Ionic应用程序时, 它将显示以下屏幕。在这里, 你可以看到每个Spinner组件样式都不同。