如何在离子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

[重复的Ionic - how to slide ion-segments?

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

清洁，只使用离子特性。您可以实现听一个变量的离子幻灯片和离子段，比如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>