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

对于那些只寻找无限幻灯片的人，您只需要将ionSlideReachEnd事件用于幻灯片

<ion-slides   [options]="sliderOpts" (ionSlideReachEnd)="moreData($event)" >

然后在您的ts

moreData(newData){
  this.offset++;
this.api.post('search/data/'+this.offset,data).toPromise().then((res)=>{
    if (res['status'] == 200) {
      res['oldData'].forEach(newData => {
        this.data.push(newData);
        });

    }})

}

对于更多UI / UX，我认为最好使用ionSlideNextEnd代替

Answer 2

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

null

Answer 3

用离子含量

包裹ion-slide的内容

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

Answer 4

您可以使用以下简单的CSS解决此问题：

离子滑动{高度：初始； }

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

Answer 5

对于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%;
}

Answer 6

我在ionic v3中有相同的问题，我通过以下方式解决了

ion-slides {
  height: auto;
}

由https://github.com/brandyscarney引荐

离子滑动和离子无限滚动

6 个答案: