ionic5.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>






这就是ionic5.x segment组件实现tab切换功能的使用方法,ionic5.x segment组件实现tab切换功能就给大家先介绍到这里,希望对你有帮助

更多ionic5.x segment组件实现tab切换功能的使用教程:https://www.itying.com/goods-1067.html