I am using Ionic2.
Your system information:
Cordova CLI: 6.4.0
Ionic Framework Version: 2.3.0
Ionic CLI Version: 2.1.18
Ionic App Lib Version: 2.1.9
Ionic App Scripts Version: 1.1.4
ios-deploy version: Not installed
ios-sim version: Not installed
OS: macOS Sierra
Node Version: v6.9.4
Xcode version: Xcode 8.3 Build version 8E162
I have an infinite scroll which works perfectly, loading 15 items at a time. As I scroll down, it loads another 15 and so on:
...
</ion-list>
<ion-infinite-scroll id="infinite-scroll-search" (ionInfinite)="doInfinite($event)">
<ion-infinite-scroll-content id="infinite-scroll-content-search"></ion-infinite-scroll-content>
</ion-infinite-scroll>
However, I then add tabs, including my original page:
<ion-tabs>
<ion-tab [root]="tab1Root" tabTitle="Page1" tabIcon="person"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle=Page2" tabIcon="heart"></ion-tab>
<ion-tab [root]="tab3Root" tabTitle=Page3" tabIcon="briefcase"></ion-tab>
</ion-tabs>
The tabs work correctly, displayed at the bottom of the page. However, the doInfinite($event) function is not called when I scroll down as it did before the tabs were added. As a result, it does not load more than 15 rows.
It appears as if the tabs have affected the pages scroll event. Scrolling to the bottom does not fire the ionInfinite event and invoke the doIninite($event) anymore.
The first time the page loads the infinite scroll works, but if I click on the tab icon to load the page, then the ionInfinite event doesn’t work. So it may be related to how the tab is trying to cache the data or something.
Has anyone else experienced this problem? Does anyone have any ideas how I can debug this?
Any help appreciated.