带有分段和离子幻灯片的可滑动标签答案

【问题标题】：Swipable tabs with segment and ionic slides带有分段和离子幻灯片的可滑动标签
【发布时间】：2018-03-26 08:27:57
【问题描述】：

如果我有不同的幻灯片，我对离子幻灯片的内容高度有疑问。我已将高度设置为自动，但如果我更改为另一个幻灯片高度不会重置。

 <ion-slides #pageSlider (ionSlideWillChange)="changeWillSlide($event)" style="height:auto">
        <ion-slide>
            <h1>ContentTab 1</h1>
            <h1>ContentTab 1</h1>
            <h1>ContentTab 1</h1>
            some more content....

        </ion-slide>
        <ion-slide>
            <h1>ContentTab 1</h1>
            <h1>ContentTab 1</h1>
            some more content....

        </ion-slide>
        <ion-slide>
            <h1>ContentTab 1</h1>
            some more content....
        </ion-slide>
    </ion-slides>

这里是查看项目的链接

https://stackblitz.com/edit/ionic-gyfjks?file=pages%2Fhome%2Fhome.html

请帮我解决这个问题。

【问题讨论】：

标签： ionic3

【解决方案1】：

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

简单甚至逻辑只在html中，无需JS自定义代码。你可以实现 ion-slides 和 ion-segment 来监听 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>

【讨论】：