Ionic2 infinite scroll

Ionic Framework ionic-v3
1

I tried to use infinite scroll in an application but I have some issues:

  1. loadMore method is called too often. e.g. I have 10 items to display (3 items are displayed on the screen, for the next 7 I have to scroll) and the loadMore event is called for 7 times.
  2. should I throw the event: scroll.infiniteScrollComplete as in ionic 1? (e.g. $scope.$broadcast(‘scroll.infiniteScrollComplete’). If yes, how should be throw the event (exists a sample somewhere)?

thanks

2

Perhaps I missed an update but I’m pretty sure infinite scroll hasn’t been added to Ionic 2 yet (I don’t see it in the docs), where are you getting this from?

1 Like
3

I used a similar code (I don’t have access now to the code), and the loadMoreData method is called on scroll:

<ion-infinite-scroll distance=“2”
[onInfinite]=“loadMoreData()”>

between tag: ion-infinite-scroll

4

I’m not sure where you are getting this code from, so it’s hard to help you. ion-infinite-scroll does not exist in ionic 2 yet.

5

Any idea, when this will be added?

6

Hi @brandyshea, can you please provide any roadmap or doc on which components are you guys working on.

We want to develop an app in ionic2, but it lacks of many ionic1 components, which are required for our app.

-Thanks

7

https://github.com/driftyco/ionic/tree/2.0/ionic/components/list/test/infinite - here seems to be a test for the infinite scroll. I thought that maybe is not updated in the documentation - please see this conversation: https://github.com/driftyco/ionic/issues/5072.

So, I added in page the code <ion-infinite-scroll [onInfinite]="loadMoreData()"></ion-infinite-scroll> inside an ion-list and the loadMoreData method is call on page scroll. But the method is called too often.

8

I think there is some confusion here. The virtual.ts file was added a long time ago and it is supposed to replace collection-repeat, but it hasn’t been updated and it is not working at the moment. There is no ion-infinite-scroll component or directive at the moment. I see the issue discussion but it doesn’t exist. I’m honestly not sure how that function is being called…as we don’t have any onInfinite attribute either.

As for the roadmap, we created a doc and are updating it with missing/incomplete components. There are no set dates - we are just adding to it right now: Roadmap

@prolink007 @mrameezraja

9

@brandyshea thank you for your answer and roadmap.

10

@brandyshea hi!
u have some idea about when we be able to use Infinite Scroll and Pull to refresh (added but needs updating) ?

just to know… like, days? weeks? months?

thank you!

11

We do not have any scheduled dates for adding components at this time.

We are focused on improving performance & getting the documentation up to date with existing components before adding any new components. I can say that we will not be adding any new components between now and next Wednesday (2/10). I would expect them to be added sometime soon after that.

There have been some milestones added to Github (these dates are estimates) and we will work on adding issues to the milestones: https://github.com/driftyco/ionic/milestones

1 Like
12

thanks for the fast answer!

13

InfiniteScroll

3 Likes
14

:slight_smile: great… thank you

15

@brandyshea
does ion-infinite-scroll working now on ionic2?
i have implemented the following code, and the ionInfinite event is never being fired.
i have spent whole day dealing with it and i’m really stuck…

<ion-content style="overflow-y: auto">
<ion-list [style.direction]="direction">
    <ion-item  *ngFor="let item of selectedEntItems | objToIterable;let ind=index">
        <!--List item header-->
        <ion-card-header  *ngFor="let column of columns | objToIterable"  (click)="ListItemClick(item,ind)"  [ngClass]="{'hide': notHeaderColumn(item,column) ,'ListItemHeader':true}" >
              <span>
                {{ column.title + ': ' + getVal(item,column)}}
              </span>
              <span >,</span>
        </ion-card-header>

        <!--List item content-->
        <ion-card-content *ngFor="let column of columns | objToIterable" (click)="ListItemClick(item,ind)" [ngClass]="{'hide': notBodyColumn(item,column) }">
           <p> {{column.title + ': ' + getVal(item,column)}}</p>
        </ion-card-content>
        <ion-icon name="close" (click)="deleteRow(item,ind)" class="listDelete"></ion-icon>
    </ion-item>
</ion-list>

<ion-infinite-scroll (ionInfinite)="doInfinite($event)"> 
    <ion-infinite-scroll-content
      loadingSpinner="bubbles"
      loadingText="Loading more data...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>

</ion-content>
16

@brandyshea
in addition to the question above, do i need to add ion-scroll in order that the list will be scroll-able, or does this behavior is built-in with the list?
if i omit the style=“overflow-y: auto”, no scrollbar is displayed, and the list is not scroll-able, even if add ion-scroll.
please advise.

17

hi @brandyshea/@mhartington/anyone else from the ionic team,
is there any solution to my scrolling issue?
as i described before, i’m using ionic2, i have an ion-list inside ion-content, and i have two problems:

  1. the list is not being scrolled at all, unless i add style=“overflow-y: auto” to the content. it is not scrolled even if i add ion-scroll inside/outside the content.
  2. when i add the overflow-y and scrollbar is displayed, the infinite-scroll does not work. the ionInfinite event is not fired.

what i need is a list that is scrollable without scrollbars, and infinite-scroll functionality.
i need a solution as soon as possible and really appreciate your reply.
thanks.

18

I have a sample project with infinite scroll working

For starters, the <ion-content style="overflow-y: auto"> is probably causing issues, since this is already taken care of in ionic’s code.

19

thanks @mhartington, it seems to work now.
there is only issue with the infinite-scroll-content, which is sometimes not being displayed, and sometimes being displayed after loading the more data.
what is the purpose of the setTimeout? maybe it is related to this?
and one other question: after loading more data, is there option to scroll to the top of the list?

thanks!!

20

The timeout is just there to simulate a long running request, it really shouldn’t be there for a real app.

1 Like