Ionic进度条 _Ionic进度条

本文概述

确定进度栏
不确定进度条
着色进度条
与进度栏绑定变量

Ionic进度条组件是水平进度条, 用于可视化操作和活动的进度。我们可以使用标准的< ion-progress-bar> 组件来访问Ionic进度条。
Ionic进度条有两种类型, 如下所示。

某些
不定

确定进度栏它是一种进度条, 在知道某项操作的百分比时可以使用。确定进度条是默认进度条的一种, value属性表示进度。
例
以下示例说明了确定的进度条, 其中value属性表示进度。

< ion-header> < ion-toolbar color="light"> < ion-title> Ionic Progress Bar< /ion-title> < /ion-toolbar> < /ion-header> < ion-content fullscreen class="ion-padding"> Default Progress Bar < ion-progress-bar> < /ion-progress-bar> Default Progress Bar with 50 percent < ion-progress-bar value="http://www.srcmini.com/0.5"> < /ion-progress-bar> < /ion-content>

输出：
执行上述Ionic应用程序后, 将提供以下输出。

文章图片
不确定进度条它是一种进度条, 指示操作正在进行中。这意味着无需指明将花费多长时间。如果添加属性reversed =“ true”, 则会收到用于指示预加载的查询。以下示例对其进行了更清晰的说明。
例

< ion-header> < ion-toolbar color="light"> < ion-title> Ionic Progress Bar< /ion-title> < /ion-toolbar> < /ion-header> < ion-content fullscreen class="ion-padding"> Indeterminate Progress Bar < ion-progress-bar type="indeterminate"> < /ion-progress-bar> < ion-progress-bar type="indeterminate" reversed="true"> < /ion-progress-bar> < /ion-content>

输出：
当你运行以上代码片段时, 将提供以下输出。在这里, 你将看到两个进度条都朝相反的方向动画。

文章图片
缓冲区：它将圆圈显示为动画, 以指示某些活动。如果buffer属性的值小于1, 则可以显示其他缓冲进度。我们可以从以下示例中了解缓冲区属性的使用。
例

< ion-header> < ion-toolbar color="light"> < ion-title> Ionic Progress Bar< /ion-title> < /ion-toolbar> < /ion-header> < ion-content fullscreen class="ion-padding"> Default Progress Bar < ion-progress-bar value="http://www.srcmini.com/0.25"> < /ion-progress-bar> Buffer Progress Bar < ion-progress-bar value="http://www.srcmini.com/0.25" buffer="0.5"> < /ion-progress-bar> < /ion-content>

输出：

文章图片
着色进度条可以使用颜色属性对< ion-progress-bar> 组件进行着色。可以从以下示例中进行解释。
【Ionic进度条】例

< ion-header> < ion-toolbar color="light"> < ion-title> Ionic Progress Bar< /ion-title> < /ion-toolbar> < /ion-header> < ion-content fullscreen class="ion-padding"> Colorize Progress Bar < ion-progress-bar value="http://www.srcmini.com/0.60" color="success"> < /ion-progress-bar> < ion-progress-bar value="http://www.srcmini.com/0.50" color="warning"> < /ion-progress-bar> < ion-progress-bar value="http://www.srcmini.com/0.70" color="danger"> < /ion-progress-bar> < /ion-content>

输出：

文章图片
与进度栏绑定变量我们还可以将进度栏与该值绑定。为此, 我们需要在方括号中添加值, 这将变量绑定到此value属性。以下示例对其进行了更清晰的说明。
例

home.page.html文件包含value属性, 该属性调用将变量绑定到该属性的属性。相应的逻辑写在home.page.ts文件中。
Home.page.html

< ion-header> < ion-toolbar color="light"> < ion-title> Ionic Progress Bar< /ion-title> < /ion-toolbar> < /ion-header> < ion-content fullscreen class="ion-padding"> Bind to Variable < ion-progress-bar [value]="progress"> < /ion-progress-bar> < /ion-content>

Home.page.ts

import { Component } from '@angular/core'; @Component({ selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'], }) export class HomePage { progress = 0; constructor() { setInterval( () => { this.progress += .1; }, 1000 ); } }

输出：
当你执行上面的Ionic应用程序时, 它将提供以下输出。在这里, 你将看到, 当值超过时, 进度条也将超过。