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>

输出：

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

注意：我们还可以使用属性名称更改默认的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 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还允许我们设置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 );
  }
}

输出：

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

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

设置微调框

我们还可以为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组件样式都不同。