Ionic 旋转器

Ionic Spinner 组件提供了几个 SVG 旋转器。 旋转器是视觉指示器，指示应用程序正在加载内容或执行另一个进程，以便用户需要等待。

不同平台的默认旋转器不同。 例如，iOS 应用程序具有默认旋转器lines，而 android 应用程序具有默认旋转器crescent。 如果平台既不是 iOS 也不是 android，则默认旋转器将为 crescent。 我们可以使用标准 <ion-spinner> 组件访问 Ionic Spinner。

示例

此示例显示了在 Ionic 应用程序中使用默认旋转器。

输出

当您执行上述代码片段时，它将给出以下输出。 在这里，您可以看到默认旋转器正在加载，这是一条线。

注意: 我们还可以使用属性 name 更改默认旋转器。 以下示例解释了 Ionic 应用程序中使用的不同类型的旋转器。

示例

输出

暂停旋转器

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

示例

在此示例中，我们已在圆形旋转器中设置了属性 paused。

输出

执行上述代码时，您将获得以下输出。 在这里，您可以看到 circle spinner 将被暂停。

设置时间

Ionic 还允许我们为 Spinner 组件设置持续时间。 这意味着当达到您设置的时间时，Spinner 组件的视觉加载指示将消失。

示例

Home.page.html

Home.page.ts

在这里，我们为 Spinner 组件设置了超时持续时间。

输出

当您执行上述代码片段时，它将给出以下输出。

每当达到您设置的时间限制时，线旋转器加载的视觉指示器就会消失。 我们可以在下面的图像中看到它。

设置 Spinner 的样式

我们还可以为 Spinner 组件设置不同的样式或颜色。 以下示例说明了在 Spinner 组件中使用不同颜色样式。

示例

输出

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