本文概述
- 暂停微调器
- 设定时间
- 设置微调框
不同平台的默认微调器不同。例如, 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">
<
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组件样式都不同。
文章图片
推荐阅读
- Ionic初始屏幕
- Ionic幻灯片组件
- Android和iOS的10个最佳语言学习应用程序合集(哪款最适合你())
- iPhone和iPad的10款最佳Apple Mail替代品(邮件软件合集推荐)
- 12款最佳免费照片编辑软件合集推荐(哪款最适合你())
- 学习舞蹈的10款最佳iPhone和Android应用合集推荐
- Android和iPhone的15款最佳漫画应用推荐(你最喜欢哪款())
- 最佳PDF编辑器推荐(你可以使用的10大PDF编辑器合集)
- 9款适用于Android和iOS的最佳ASMR应用和游戏合集推荐