项目总结关于ionic3中的ion-segment的总结

2018-5-30 seo达人

如果您想订阅本博客内容，每天自动发到您的邮箱中，请点这里

目前做的项目是ionic3和angular4.0的结合，所以用到了很多关于ionic3中封装好的标签，例如具有轮播效果的ion-slides和ion-slide等。那么这次就要总结一下另外一个标签ion-segment的用法了。
ion-segment这个标签以前用的很少，几乎没有用过。它主要是一组按钮，有时称为分段控件，之前都是用button按钮，现在知道了，开始用ion-segment，因为它有自带的样式，这样就可节省很多时间，同时呢允许用户与许多控件的紧凑组进行交互。分段提供与标签相似的功能，选择一个将取消选择所有其他选项。当您希望让用户在应用程序的不同页面之间来回移动时，应使用选项卡栏而不是分段控件。您可以使用Angular的ngModel或FormBuilder API。
下面来看一段代码：

Segment 在头部使用

<ion-header> <ion-toolbar> <ion-segment [(ngModel)]="icons" color="secondary"> <ion-segment-button value="camera"> <ion-icon name="camera">带iocn</ion-icon> </ion-segment-button> <ion-segment-button value="bookmark"> 头部使用Segment <ion-icon name="bookmark"></ion-icon> </ion-segment-button> </ion-segment> </ion-toolbar> </ion-header>

1

2

3

4

5

6

7

8

9

10

11

12

13

Segment 在内容里面使用

<ion-segment [(ngModel)]="relationship" color="primary" (ionChange)="segmentChanged($event)"> <ion-segment-button value="friends"> Segment 在内容里面使用 </ion-segment-button> <ion-segment-button value="enemies"> 可以绑定一个事件(ionChange) </ion-segment-button> </ion-segment>

1

2

3

4

5

6

7

8

Segment 在表单里面使用

<form [formGroup]="myForm"> <ion-segment formControlName="mapStyle" color="danger"> <ion-segment-button value="standard"> Standard </ion-segment-button> <ion-segment-button value="hybrid"> 表单内使用 </ion-segment-button> <ion-segment-button value="sat"> Satellite </ion-segment-button> </ion-segment> </form>

1

2

3

4

5

6

7

8

9

10

11

12

13

Segment 配合ngSwitch使用
<ion-segment [(ngModel)]="change"> <ion-segment-button value="apple"> 苹果 </ion-segment-button> <ion-segment-button value="pie"> 梨 </ion-segment-button> </ion-segment> <div [ngSwitch]="change"> <div *ngSwitchCase="'apple'">

1

2

3

4

5

6

7

8

9

10

苹果显示，如果要默认显示一个就把默认的那个设置一个初始值比如要默认显示苹果就把苹果的value值设置成change也就是说，在定义change变量的时候，需要把哪个设置为默认显示就把哪个的value值赋值给change作为初始值 public change=”pie”;

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

分享本文至：

« jquery原理的简单分析 css的多行省略号处理 »

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

项目总结关于ionic3中的ion-segment的总结

分类

日历

链接

个人资料

存档