ionic 微调器

ionic 微调器组件提供了多个SVG微调器。微调框是视觉指示器，指示应用程序正在加载内容或正在执行其他过程，以便用户需要等待。

不同平台的默认微调器不同。例如， iOS应用程序具有默认的Spinner line ，而android应用程序具有默认的Spinner crescent 。如果平台不是iOS也不是android，则默认Spinner将为新月形。我们可以使用标准的组件来访问Ionic Spinner。

例

本示例说明了在Ionic应用程序中使用默认微调器。

  
    Ionic Spinner
  



  

输出：

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

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

例

    
      Ionic Spinner
    

  

  
Lines
  
  
  
Line Small
  
  
  
Dots
  
  
  
Bubbles
  
  
  
Circles
  
  
  
Crescent
  

输出：

暂停微调器

Ionic Spinner还允许我们使用一个属性来暂停Spinner组件的动画。默认情况下， paused属性为false。如果为true，则将暂停Spinner动画。以下示例有助于更清楚地理解它。

例

在此示例中，我们将属性设置为在圆形微调器中暂停。

  
    Ionic Spinner
  



  
Bubbles
  

  
Circles
  

  
Crescent
  

输出：

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

设定时间

Ionic还允许我们设置Spinner组件的持续时间。这意味着到达设置的时间后，微调器组件的视觉负载指示将消失。

例

Home.page.html

    
      Ionic Spinner
    
  
  

  
Lines
  
  
  
Dots
  
  
  
Circles
  

主页

在这里，我们为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组件内部不同颜色样式的使用。

例

    
      Ionic Spinner
    
  
  

  
Crescent
  
  
  
Dots
  
  
  
Circles
  
  

输出：

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