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

离子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;
}

离子滑轨全高-离子3

2 个答案: