ionic4.x segment组件实现tab切换功能
在ionic中如果我们想在页面中实现tab切换是非常简单的,我们可以借助segment组件,然后结合ngSwitch来实现,下面我们看看代码。
<ion-segment [(ngModel)]="tabs" (ionChange)="segmentChanged($event)"> <ion-segment-button value="plist"> 商品列表 </ion-segment-button> <ion-segment-button value="pcontent"> 商品详情 </ion-segment-button> </ion-segment> <div [ngSwitch]="tabs"> <div class="con1" *ngSwitchCase="'plist'"> 商品图文信息 </div> <div class="con2" *ngSwitchCase="'pcontent'"> 商品详情 </div> </div>
这样就可以实现tab切换,当然ion-segment也可以用于顶部导航,这样我们就可以在顶部导航进行tab切换来改变内容。
<ion-header> <ion-toolbar> <ion-segment [(ngModel)]="tab" color="success"> <ion-segment-button value="tab1"> <ion-label>简介</ion-label> </ion-segment-button> <ion-segment-button value="tab2"> <ion-label>详情</ion-label> </ion-segment-button> <ion-segment-button value="tab3"> <ion-label>评论</ion-label> </ion-segment-button> </ion-segment> </ion-toolbar> </ion-header> <ion-content> <div class="info" [ngSwitch]="tab"> <div *ngSwitchCase="'tab1'"> 商品简介 --注意ngSwitchCase写法 </div> <div *ngSwitchCase="'tab2'"> 商品详情 </div> <div *ngSwitchCase="'tab3'"> 商品评论 </div> </div> </ion-content>