離子滑軌全高 - Ionic 3

Question

我正在使用ion-slides組件，當幻燈片內容高度大於視圖時，我無法向下滾動以查看幻燈片內容的其余部分。 那么，我應該如何向下滾動以查看幻燈片上的其余內容？

我正在使用這個htlm

   <ion-content> 

      <ion-slides>
        <ion-slide>
          <div>...</div>
        </ion-slide>
      </ion-slides>  

    </ion-content>

我嘗試過的是：

    <ion-content>        
      <ion-slides style="height: 100%" >
        <ion-slide style="height: 100vh" >
          <div>...</div>
        </ion-slide>
      </ion-slides>       
    </ion-content>

   <ion-content>        
      <ion-slides style="height: 100vh" >
        <ion-slide style="height: 100%" >
          <div>...</div>
        </ion-slide>
      </ion-slides>       
    </ion-content>

   <ion-content>        
      <ion-slides style="height: 100%" >
        <ion-slide>
          <div>...</div>
        </ion-slide>
      </ion-slides>       
    </ion-content>

Answer 1

在您想要垂直滾動的ion-slide內

<ion-slide>
    <ion-content>
         <ion-infinite-scroll>
            <!--code here-->
         </ion-infinite-scroll>
    </ion-content>
</ion-slide>

在你的.scss

.slide-zoom {
    height: 50%;
}

Answer 2

對於 Ionic 4，它略有不同......

您需要在html文件中將 scrollEvents 設置為 true

<ion-content [scrollEvents]="true">
  <ion-slides #slides (ionSlideDidChange)="onSlideChanged()">
    <ion-slide>
      <ion-infinite-scroll>
        <!-- slide 1 -->
      </ion-infinite-scroll>
    </ion-slide>
    <ion-slide>
      <ion-infinite-scroll>
        <!-- slide 2 -->
      </ion-infinite-scroll>
    </ion-slide>
  </ion-slides>
</ion-content>

在ts文件中

.
.
.
@ViewChild("slides", { static: false }) slides: IonSlides;
@ViewChild(IonContent, { static: false }) content: IonContent;
.
.
async onSlideChanged(): Promise<void> {
    this.content.scrollToTop();
}

在global.scss文件中

ion-infinite-scroll {
  height: 100vh;
}