PhoneGap中文网

标题: ionic3/ionic4 ion-segment tab切换的使用 [打印本页]
作者: 你懂的    时间: 2017-12-5 12:44
标题: ionic3/ionic4 ion-segment tab切换的使用
ionic3/ionic4   ion-segment tab切换的使用是怎样的呢?下面来为大家揭晓答案：


在ionic3或者ionic4中可以用ion-segment组件实现tab切换，具体代码如下：


  1. <ion-header>

  3.   <ion-navbar>
  4.    
  5.     <ion-segment [(ngModel)]="tabs">
  6.       <ion-segment-button value="plist">
复制代码

        商品
     
  1. </ion-segment-button>
  2.       <ion-segment-button value="pcontent">
复制代码

        详情
      
  1. </ion-segment-button>     
  2.     </ion-segment>

  4.   </ion-navbar>

  6. </ion-header>


  9. <ion-content padding>

  11.   <div [ngSwitch]="tabs">
  12.     <div class="con1" *ngSwitchCase="'plist'">
复制代码

        商品图文信息
   
  1. </div>

  3.     <div class="con2" *ngSwitchCase="'pcontent'">
复制代码

        商品详情
   
  1.   </div>
  2.    
  3.   </div>

  5. </ion-content>
复制代码

了解更多ionic3相关资料见：https://www.itying.com/goods-460.html
作者: 幽梦林子    时间: 2017-12-28 22:39




欢迎光临 PhoneGap中文网 (http://bbs.phonegap100.com/) Powered by Discuz! X3.2