[RC.5] infinite scroll does not work with ion-slide with async data

[leongzw]

Ionic version: (check one with "x") [ ] 1.x [x] 2.x

I'm submitting a ... (check one with "x") [x] bug report [ ] feature request [ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:

infinite scroll in ion-slide is not trigger when the view is scrolled to the bottom upon entering the view for the first time, however it will be triggered after navigating back from a view pushed from the slide. This only happens when its async data.

Expected behavior: infinite scroll should be functioning upon entering the view.

Steps to reproduce:

1. Create an ion-slides with async data.
2. Add infinite scroll to ion-slide.
3. Scroll to bottom (you will see the infinite scroll component is present there and loading spinner is rendered but it does not trigger the (ionInfinite).
4. Push a page from ion-slide.
5. Navigate back to the ion-slide.
6. The infinite scroll should work as usual now.

Related code:

<ion-slides #productSlider (ionSlideWillChange)="onSlideChanged()">
  <ion-slide *ngFor="let category of categories, let i = index">
    <ion-content>
        <ion-list>
            <ion-item *ngFor="let store of stores[i], let j = index" (click)="pushPage()">
                <p>{{store?.prodClassName}}</p>
            </ion-item>
        </ion-list>
    <ion-content>
  </ion-slide>
</ion-slides>

Other information: This only happens if the data in *ngFor is async from server. If the data is initialized locally, the infinite scroll is working perfectly. It looks like the ion-content is broken upon entering the view with ion-slide for the first time since infinite scroll has to be placed in an ion-content to be functioning. Even (ionScroll) event i placed in ion-content inside of the ion-slide is not fired before reentering the view.

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.5
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.0.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 7
Node Version: v6.3.1
Xcode version: Not installed

[jwelmac]

Have you tried the final release version to see if that helps?

[leongzw]

@jwelmac Yes i did try out the final release but no luck, the issues are still existing.

[jgw96]

Hello, thanks for opening an issue with us, we will take a look into this.

[tiagomestreteixeira]

@leongzw i'm also with the same problem. Thank you for reporting this issue

[leongzw]

@jgw96 Hi, do you have any update or hotfix for this issue??

[leongzw]

further update: it seem like the issue is caused by multiple of , as i moved the out from the the infinite scroll and ionScroll event inside the second ion-content are still not firing, the code structure now is like below:

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

[larssn]

I'm having trouble with Infinite Scroll as well, on an ion-list. If you use position="top", when using an async datasource, the initial rendering of the list will not start at the bottom of the list as it should (it works when using a synchronous data source). So it begins at the top of the list, and immediately starts loading in more data when you scroll (because you are already at the top).

Hope that makes sense.

I've tried wrapping the entire thing in an *ngIf, but it doesn't solve the problem.

This is in v3.3.0!

Edit - a bit of code for clarification The problems comes from the async pipe:

<ion-infinite-scroll (ionInfinite)="doInfinite($event)" position="top">
   <ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
<ion-list>
   <ion-item *ngFor="let item of items | async">{{item}}</ion-item>
</ion-list>

@leongzw Possible that you update the title to reflect that this also happens with ion-list, and Ionic 3.3.0?

[andrewvmail]

Yeah confirming that this is happening to me too on ion-list

[vibinflogesoft]

Iam having same issue with ionic infinitescroll with ion slider. Working for only for the initial page loading. Api returns data perfectly on each scroll. Is there any solution for the issue? Waiting for the update on the isssue My current version:3.9.2

[vibinflogesoft]

@jgw96 Is there any fix for this issue? this issue is still opened.Iam in trouble with the issue . My current ionic version:3.9.2

[Anujmoglix]

facing issue with ion-slide . Currently i want to show 10 items horizontally and after reaching on last item it may show next 10 items with infinite scroll. but ion-infinite-scroll is working vertically .

[ionitron-bot[bot]]

This issue has been automatically identified as an Ionic 3 issue. We recently moved Ionic 3 to its own repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

If I've made a mistake, and if this issue is still relevant to Ionic 4, please let the Ionic Framework team know!

Thank you for using Ionic!

[ionitron-bot[bot]]

Issue moved to: https://github.com/ionic-team/ionic-v3/issues/186