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

最新推荐文章于 2021-04-12 21:58:40 发布

时清云

最新推荐文章于 2021-04-12 21:58:40 发布

阅读量4.5k

点赞数

CC 4.0 BY-SA版权

分类专栏：项目总结文章标签： ionic3

本文链接：https://blog.youkuaiyun.com/xiaolinlife/article/details/80511995

项目总结专栏收录该内容

84 篇文章

订阅专栏

本文介绍了Ionic3中的ion-segment组件及其多种应用场景，包括头部、内容及表单内的使用方法，并展示了如何通过Angular的ngModel进行数据绑定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目前做的项目是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>

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>

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>

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'">

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