如何在 ionic 2 中制作可滑动段选项卡

Question

我想添加更多数量的选项卡，有什么解决方案可以在这些选项卡上滑动吗？

<ion-segment [(ngModel)]="query" (ionChange)="showdata()">
<ion-segment-button value="slide1">
 TabTitle1
</ion-segment-button>
<ion-segment-button value="slide2">
 TabTitle2
</ion-segment-button>
<ion-segment-button value="slide3">
 TabTitle3
</ion-segment-button>
</ion-segment> 

Answer 1

在 CSS 下面添加，这将起作用

供参考：- https://github.com/driftyco/ionic/issues/7202

home {
.swiper-slide {
overflow-y: scroll;
display: block;
}
ion-segment {
    display: block;
    white-space: nowrap;
    font-size: 0;
    overflow: auto;
    &::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
    }
    ion-segment-button.segment-button {
        display: inline-block;
        min-width: 100px;
        width: auto;
    }
}
/*
ion-segment-button.segment-button {
    display: inline-block!important;
    min-width: 100px!important;
    width: auto!important;
    }*/
}

Answer 2

您可以尝试使用ion-scroll。

<ion-scroll scrollX=true>
<ion-segment [(ngModel)]="query" (ionChange)="showdata()">
<ion-segment-button value="slide1">
 TabTitle1
</ion-segment-button>
<ion-segment-button value="slide2">
 TabTitle2
</ion-segment-button>
<ion-segment-button value="slide3">
 TabTitle3
</ion-segment-button>
</ion-segment> 
</ion-scroll>

Answer 3

[重复离子 - 如何滑动离子段？

简单易行甚至逻辑只在html中，不需要JS自定义代码。

干净，仅使用离子功能。您可以实现离子载玻片和离子段，侦听 1 个变量说segment

工具栏：绑定到分段，并监听 ionChange

<ion-toolbar>
    <ion-segment (ionChange)="slides.slideTo(segment)" [(ngModel)]="segment"  color="warning">
      <ion-segment-button value="0">
        <ion-icon name="person"></ion-icon>
      </ion-segment-button>
      <ion-segment-button value="1">
        <ion-icon name="camera"></ion-icon>
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>

离子载玻片：捕获幻灯片事件，将段分配给当前活动索引

 <ion-slides #slides (ionSlideWillChange)="segment=''+slides.getActiveIndex()">
   <ion-slide>
     profile,
     hello <span *ngIf="this.userProvider.userData">{{this.userProvider.userData.name}}</span>
   </ion-slide>
   <ion-slide>
     second
   </ion-slide>
   <ion-slide>
     third
   </ion-slide>
 </ion-slides>