什么是离子成分? (ionic Components)
在大多数情况下,离子组件是使您的混合应用程序栩栩如生的原因。组件为您的应用程序提供用户界面,Ionic 捆绑了超过 28 个组件。这些将帮助您为您的应用创造令人惊叹的第一印象。
当然,您不能在单个应用程序中使用所有这 28 个组件。如何决定使用哪些?
好吧,幸运的是,您几乎可以在每个应用程序中找到一些组件。在上一篇文章中,我向您展示了如何使用Ionic Component Button导航到另一个视图。创建此按钮所需的只是以下代码:
<button ion-button>导航到信息</button>
在这里,我们已经在使用我们可用的 Ionic 组件之一。这就是 Ionic 的美妙之处:我们不必关心按钮组件是如何构造的,我们只需要知道如何正确使用相关组件即可。
何时使用离子组件?
作为一个初学者,我怀疑你开发的应用程序不会使用 Ionic 组件。您也可以开发自己的自定义组件,但对于 Ionic 和 angular 的高级用法,这是另一天的话题。
综上所述,我们来看看如何使用Ionic 移动应用中最常用的组件:
幻灯片组件
slides 组件通常用作应用程序的介绍,下面是其常用用法的图像:
列表组件
列表是您经常在 Ionic 应用程序中使用的组件之一。请看下面的屏幕截图作为示例。
将组件添加到您的项目
现在我们已经收集了一些关于 Ionic 组件的信息,让我们尝试将其中的一些“构建块”放在一起。让我们继续为我们的 Ionic 项目添加一些组件。
我们将使用我们在上一个教程中创建的项目,由于home 是我们应用程序的入口点,我们将向home.html文件添加幻灯片以添加我们的幻灯片。我们将通过导航到 src/pages/home 中的home.html 文件 并对文件进行以下更改来做到这一点:
<ion-header> <ion-navbar> <ion-title>Welcome</ion-title> </ion-navbar> </ion-header> <ion-content> <!-- Start Ionic Slides Component --> <ion-slides pager> <ion-slide style="background-color: green"> <h2>Welcome to Hello World</h2> <p>Do some reading here and swipe left</p> </ion-slide> <ion-slide style="background-color: blue"> <h2>Ionic World</h2> <p>Some more reading here and swipe left</p> <p>Swiping right works too :)</p> </ion-slide> <ion-slide style="background-color: red"> <h2>Finish</h2> <p>You can't swipe all day. See more of my app</p> <button ion-button (click)="navigateToMyList()">Show me more!</button> </ion-slide> </ion-slides> <!-- End Ionic Slides Component --> </ion-content>
正如您在上面看到的,我们使用幻灯片组件添加了三张幻灯片。这是里面<ion-slide>Content here...</ion-slide>
。您可以根据需要生成任意数量的幻灯片,但出于本示例的目的,我们只创建了三个。
我们将使用另一个 Ionic 组件:列表组件。为此,让我们继续生成一个名为 my-list的新页面。 您应该记住如何使用以下命令从上一个教程中生成新页面: ionic generate page my-list
.
将我们新创建的页面添加到我们的应用程序中,让我们继续导航到my-list.html并编辑该文件,如下所示:
<ion-header> <ion-navbar> <ion-title>My List</ion-title> </ion-navbar> </ion-header> <ion-content> <!-- Start Ionic List Component --> <ion-list> <ion-item>1</ion-item> <ion-item>2</ion-item> <ion-item>3</ion-item> </ion-list> <!-- End Ionic List Component --> </ion-content>
将上述代码添加到您的应用程序后,您应该能够看到一个包含三个项目的列表。现在这很好,但我确定您希望在滚动列表时看到带有加速和减速的平滑滚动,对吧?嗯,这很容易实现——我们只需要一个更大的列表!
考虑 my-list.html文件中的以下代码:
<ion-header> <ion-navbar> <ion-title>My List</ion-title> </ion-navbar> </ion-header> <ion-content> <!-- Start Ionic List Component --> <ion-list> <ion-item>1</ion-item> <ion-item>2</ion-item> <ion-item>3</ion-item> <ion-item>4</ion-item> <ion-item>5</ion-item> <ion-item>6</ion-item> <ion-item>7</ion-item> <ion-item>8</ion-item> <ion-item>9</ion-item> <ion-item>10</ion-item> <ion-item>11</ion-item> <ion-item>12</ion-item> <ion-item>13</ion-item> <ion-item>14</ion-item> <ion-item>15</ion-item> <ion-item>16</ion-item> <ion-item>17</ion-item> <ion-item>18</ion-item> <ion-item>19</ion-item> <ion-item>20</ion-item> </ion-list> <!-- End Ionic List Component --> </ion-content>
如果您使用上面较长的列表更新文件,您将看到加速和减速滚动。
现在这是在我们的项目中创建列表的一种方法,但是如果我们需要创建一个包含更多项目的列表,这似乎很烦人。这将意味着 <ion-item>...content...</ion-item>
为每个人写作。幸运的是,有一种更好的方法,即使是初学者,在处理大量数据和信息时也应该尝试使用相同的方法。
官方Ionic 文档 展示了如何使用不同的方法来填充项目列表:
<ion-header> <ion-navbar> <ion-title>My List</ion-title> </ion-navbar> </ion-header> <ion-content> <!-- Start Ionic List Component --> <ion-list> <button ion-item *ngFor="let item of items" (click)="itemSelected(item)"> {{ item }} </button> </ion-list> <!-- End Ionic List Component --> </ion-content>
上面代码的神奇之处在于使用了 Angular 指令: *ngFor
. 我们不会深入探讨这个指令是什么以及它的作用,但简而言之,它会迭代数据集合,允许我们在应用程序中构建数据表示列表和表格。 items
是一个包含我们数据的变量,并 item
填充了该列表中的每个项目。如果您想了解有关此指令的更多信息,请查看官方 Angular 文档。
有了这些知识,让我们用*ngFor
指令改进我们的项目。编辑 my-list.html 文件以反映以下内容:
<ion-header> <ion-navbar> <ion-title>My List</ion-title> </ion-navbar> </ion-header> <ion-content> <!-- Start Ionic List Component --> <ion-list> <ion-item *ngFor="let item of items"> <ion-avatar item-start> <img src="{{item.image}}"> </ion-avatar> <h2>{{item.title}}</h2> <p>{{item.subTitle}}</p> </ion-item> </ion-list> <!-- End Ionic List Component --> </ion-content>
这里正在发生很多事情。<ion-list>
包含一系列<ion-avatar>
组件。该item-start
属性意味着头像将与右侧对齐。每个列表项还包含一个标题标签 ( <h2>
) 和一个段落标签 ( <p>
)。
因此,基本上,您还可以在列表组件中添加其他组件。在 Ionic 文档的 List In Cards 示例中查看另一个很好的示例,了解如何实现这一点 。同样,*ngFor
在该示例中实施将是有益的。
现在,回到我们的代码,我们的items中的item包含title、subTitle和image。让我们继续在my-list.ts文件中进行以下更改:
export class MyListPage { items: any; constructor(public navCtrl: NavController, public navParams: NavParams) { this.items = [ { title: 'Item 1', subTitle: 'Sub title 1', image: 'https://placehold.it/50' }, { title: 'Item 2', subTitle: 'Sub title 2', image: 'http://placehold.it/50' }, { title: 'Item 3', subTitle: 'Sub title 3', image: 'http://placehold.it/50' }, { title: 'Item 4', subTitle: 'Sub title 4', image: 'http://placehold.it/50' }, { title: 'item 5', subTitle: 'Sub title 5', image: 'http://placehold.it/50' }, title: 'item 6', subTitle: 'Sub title 6', image: 'http://placehold.it/50' }, title: 'item 7', subTitle: 'Sub title 7', image: 'http://placehold.it/50' }, title: 'item 8', subTitle: 'Sub title 8', image: 'http://placehold.it/50' }, title: 'item 9', subTitle: 'Sub title 9', image: 'http://placehold.it/50' }, title: 'item 10', subTitle: 'Sub title 10', image: 'http://placehold.it/50' }] }
在上面的示例中,我们在构造函数文件 my-list.ts中填充我们的项目。这些将显示在我们的页面模板 my-list.html文件中。这些数据可以来自任何来源:本地数据库、用户输入或外部rest api。但是为了这个例子,我们只是对数据进行硬编码。
结论
尽管我们没有涵盖所有 Ionic 组件,但相同的原则适用于其他组件。我想鼓励您尝试并测试其余的组件并开始熟悉使用它们。正如我在开头提到的,这些组件将成为您将构建的每个 Ionic 应用程序的构建块!
- 幻灯片组件
- 列表组件