CODEWITHSUNDEEP
ionic2infinite-scroll
manish kumar
manish kumar

Reputation: 4692

ionic slide and ionic infinite scroll

i want to make a ionic slides and each slides should have a ionic refresher and ionic infinite scroll.

<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>

But while loading more news from infinite scroll , the slide is not scrolling down and i am unable to see more news at the bottom.

Upvotes: 0

Views: 4355

Answers (6)

Chandru Balamurugan
Chandru Balamurugan

Reputation: 13

i have same problem in ionic v3 , i solved it by

ion-slides {
  height: auto;
}

Referred By https://github.com/brandyscarney

Upvotes: 0

Hazem B.Khalifa
Hazem B.Khalifa

Reputation: 21

for those looking for just an infinity slides you just need to play with ionSlideReachEnd event for the slides

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

Then In your 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);
        });

    }})

}

and For more UI/UX I think is better to use ionSlideNextEnd instead

Upvotes: 2

Alexander
Alexander

Reputation: 294

For 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>

Style

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

Upvotes: 0

shivam srivastava
shivam srivastava

Reputation: 460

You can solve this with this simple css:

ion-slides { height: initial; }

this will provide independent scroll to every slide based on it's content.

Upvotes: 0

pondol
pondol

Reputation: 939

wrap ion-slide's contents with ion-content

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

Upvotes: 0

user4286081
user4286081

Reputation:

I have resolved this problem so to wrap the content of ion-slide by ion-content. But nothing was showed. So I have fixed style of slide-zoom class.

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

Upvotes: 1

Related Questions