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微调器】输出:
当你执行以上代码片段时, 将提供以下输出。在这里, 你可以看到默认的微调器加载, 即一行。
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"> < p> Lines< /p> < ion-spinner name="lines"> < /ion-spinner> < p> Line Small< /p> < ion-spinner name="lines-small"> < /ion-spinner> < p> Dots< /p> < ion-spinner name="dots"> < /ion-spinner> < p> Bubbles< /p> < ion-spinner name="bubbles"> < /ion-spinner> < p> Circles< /p> < ion-spinner name="circles"> < /ion-spinner> < p> Crescent< /p> < ion-spinner name="crescent"> < /ion-spinner> < /ion-content>

输出:
Ionic微调器

文章图片
暂停微调器 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"> < p> Bubbles< /p> < ion-spinner name="bubbles"> < /ion-spinner> < p> Circles< /p> < ion-spinner name="circles" paused> < /ion-spinner> < p> Crescent< /p> < ion-spinner name="crescent"> < /ion-spinner> < /ion-content>

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

文章图片
设定时间 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"> < p> Lines< /p> < ion-spinner *ngIf="show"> < /ion-spinner> < p> Dots< /p> < ion-spinner name="dots"> < /ion-spinner> < p> Circles< /p> < 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 ); } }

输出:
当你执行以上代码片段时, 将提供以下输出。
Ionic微调器

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

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

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

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

文章图片

    推荐阅读