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