离子滑动和离子无限滚动

Question

我想制作一个离子载玻片，每个载玻片应该有一个离子清新剂和离子无限卷轴。

<ion-slides>
  <ion-slide>
    <ion-card>
      ...card content
    </ion-card>
    <ion-infinite-scroll (ionInfinite)="_getNews1($event,from1)" *ngIf="newsType==='news-type-1'">
      <ion-infinite-scroll-content></ion-infinite-scroll-content>
    </ion-infinite-scroll>
  </ion-slide>

  <ion-slide>
    <ion-card>
      ...card content
    </ion-card>
    <ion-infinite-scroll (ionInfinite)="_getNews2($event,from2)" *ngIf="newsType==='news-type-2'">
      <ion-infinite-scroll-content></ion-infinite-scroll-content>
    </ion-infinite-scroll>
  </ion-slide>
</ion-slides>

但是当从无限滚动中加载更多新闻时，幻灯片不会向下滚动，我无法在底部看到更多新闻。

Answer 1

我已经解决了这个问题，所以用离子含量包裹离子载体的内容。但没有任何表现。所以我有固定的幻灯片缩放类风格。

<ion-slides>
  <ion-slide>
    <ion-content>
    <ion-card>
      ...card content
    </ion-card>
    <ion-infinite-scroll (ionInfinite)="_getNews1($event,from1)" *ngIf="newsType==='news-type-1'">
      <ion-infinite-scroll-content></ion-infinite-scroll-content>
    </ion-infinite-scroll>
    </ion-content>
  </ion-slide>

  <ion-slide>
    <ion-content>
    <ion-card>
      ...card content
    </ion-card>
    <ion-infinite-scroll (ionInfinite)="_getNews2($event,from2)" *ngIf="newsType==='news-type-2'">
      <ion-infinite-scroll-content></ion-infinite-scroll-content>
    </ion-infinite-scroll>
    </ion-content>
  </ion-slide>
</ion-slides>

.slide-zoom{
    width:100%;
    height:100%;
}

Answer 2

用离子含量包裹离子载玻片的内容物

<ion-slides>
    <ion-slide>
        <ion-content>
            anything what you want
            <ion-infinite-scroll>
            </ion-infinite-scroll>
        </ion-content>
    </ion-slide>
</ion-slides>

Answer 3

你可以用这个简单的css解决这个问题：

离子滑动{height：initial; }

这将根据每个幻灯片的内容提供独立滚动。

Answer 4

对于Ionic 4

<ion-slides class="slider">
  <ion-slide class="slide" padding *ngFor="let slide of slides">
    <ion-content>
      <h1>{{slide.label}}</h1>  

      <ion-infinite-scroll>
        <ion-infinite-scroll-content></ion-infinite-scroll-content>
      </ion-infinite-scroll>
    </ion-content>
  </ion-slide>
</ion-slides>

样式

.slider {
  margin: 0;
  width: 100%;
}