什么是离子成分?
什么是离子成分?
大部分情况下, 离子组件才是使您的混合应用程序栩栩如生的要素 。 组件为您的应用程序提供用户界面,而Ionic捆绑了28多个组件。 这些将帮助您对应用程序产生惊人的第一印象。
当然,您不能在单个应用程序中使用所有这28个组件。 如何决定使用哪个?
好吧,幸运的是,几乎每个应用程序中都有一些组件。 在上一篇文章中,我向您展示了如何使用Ionic Component Button导航到另一个视图。 创建此按钮所需要做的就是以下代码:
<button ion-button>Navigate to Info</button>
在这里,我们已经在使用可用的离子组件之一。 这就是Ionic的优点:我们不必担心按钮组件的构造方式,我们只需要知道如何正确使用相关组件即可。
何时使用离子组件?
何时使用离子组件?
作为一个初学者,我怀疑您开发的应用程序会不会使用Ionic组件。 您也可以开发自己的自定义组件,但这是高级使用Ionic和Angular的另一天的主题。
综上所述,让我们看一下如何在Ionic移动应用程序中使用最常用的组件:
幻灯片组件
幻灯片组件通常用作应用程序的简介,下面是其常用用法的图片:
列表组件
列表是您还将经常在Ionic应用程序中使用的组件之一。 请看下面的屏幕截图作为示例。
向项目添加组件
现在,我们已经收集了有关离子组件的一些信息,让我们尝试将其中的一些“构建基块”放在一起。 让我们继续,向我们的Ionic项目添加一些组件。
我们将使用我们在前面的教程中创建的项目,因为家庭 是我们应用的入口点,我们将幻灯片添加到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>
如您在上面看到的,我们已经使用slides组件添加了三张幻灯片。 这是<ion-slide>Content here...</ion-slide>
。 您可以根据需要生成任意数量的幻灯片,但就本示例而言,我们仅创建了三个。
我们将使用另一个Ionic组件:list组件。 为此,我们继续生成一个名为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>
。 幸运的是,有一种更好的方法,即使是初学者,在处理大量数据和信息时,也应尝试遵循相同的方法。
<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 docs的“在卡片中列出”示例中,看看如何实现此目标的另一个绝佳示例。 再次,在该示例中实现*ngFor
将是有益的。
现在,回到我们的代码, 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应用程序的构建基块!
翻译自: https://code.tutsplus.com/tutorials/ionic-from-scratch-working-with-ionic-components--cms-30779