离子滑梯全高度离子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来说有点不同..。

您需要在scrollEvents文件中将html设置为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;
}