Ionic2 如何在ionic 2中制作可滑动段标签？

我想添加更多的选项卡，是否有任何解决方案可以在这些选项卡之间滑动

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

你可以试着用它

你可以试着用它

---

添加下面的CSS，这将工作

供参考：-

---

添加下面的CSS，这将工作

供参考：-

[重复

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

清洁，仅使用离子功能。 您可以实现离子幻灯片和离子段，听1个变量说段

工具栏：绑定到段，并更改

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

[重复

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

清洁，仅使用离子功能。 您可以实现离子幻灯片和离子段，听1个变量说段

工具栏：绑定到段，并更改

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

---

---

你的意思是像幻灯片一样？我的问题是我想在那个片段中添加6个项目，现在我只能添加4个片段，如果标题是一个较长的单词，那么它只显示单词的一半。为了避免这些问题，我希望片段栏可以旋转。这样你的意思是像幻灯片一样？我的问题是我想在那个片段中添加6个项目s，现在我只能添加4个片段，如果标题是一个较长的单词，那么它只能显示一半的单词。为了避免这些，我希望片段栏可以旋转。这样，片段在添加后就消失了。它在您的情况下起作用了吗？您能分享您的工作代码吗？@DEEPANKUMAR我将尝试创建一个plunker和更新e答案..无法立即执行..@DEEPANKUMAR您需要指定添加此选项后的高度。它在您的案例中有效吗？您可以分享您的工作代码吗？@DEEPANKUMAR我将尝试创建一个plunker并更新答案..无法立即执行..@DEEPANKUMAR您需要为ion Scroll指定高度谢谢。工作没有任何问题，也很顺利。通常，ion-CSS3动画在设备中运行缓慢，我的意思是它们不如javascript动画平滑。有什么建议吗？这就像魅力一样有效。但片段不会随内容一起滑动。你能帮我吗？使用滑动功能来实现这一点很好。也许值得一提的是：如果你在刷卡时遇到问题，请检查你的ion段按钮上是否有tab事件-直到我将其更改为click event时，它才对我起作用。谢谢。工作时没有任何故障，也很顺利。通常ionic-CSS3动画在设备中运行缓慢，我的意思是它们不如ja平滑vascript动画。有什么建议吗？这就像魅力一样。但是片段不会随内容一起滑动。你能帮我一下吗。使用滑动功能让它工作得很好。也许值得一提的是：如果你在滑动过程中遇到问题，请检查你的ion片段按钮上是否有选项卡事件-它对我不起作用直到我把它改成点击事件