이온 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>