I cannot make infinite-scroll working on Onsen 2

Question

Based on the documentation on Onsen2 (this page) on-infinite-scroll and ng-infinite-scroll should work, but I cannot make them work.

<ons-page modifier="material" ng-controller="PostListController" on-infinite-scroll="nextItems()" >

and

$scope.nextItems = function () {
    alert(1);
}

Is there any thing that I missed.

codepen sample

score 2 · Accepted Answer · edited Apr 04 '16 at 00:31

2

This feature was added in beta.8 so you need to update. on-infinite-scroll="nextItems" should work for Vanilla JS and ng-infinite-scroll="nextItems" for AngularJS. Notice that I removed ().

You can also set myPage.onInfiniteScroll property to whatever function you want.

Example: http://codepen.io/frankdiox/pen/GZEyjR , http://codepen.io/IliaSky/pen/wGqRRz

UPDATE: There was actually a bug in this feature that has been fixed already in beta.9.

Correct usage of infinite scroll in Vanilla JS is like this:

<ons-page on-infinite-scroll="myHandler"> ... </ons-page>

var myHandler = function(done) {
  console.log('do something');
  done();
}

In Angular 1 (same scope):

<ons-page ng-infinite-scroll="myHandler"> ... </ons-page>

$scope.myHandler = function(done) {
  console.log('do something');
  done();
}

edited Apr 04 '16 at 00:31

Reza

18,865
13
88
163

answered Mar 27 '16 at 08:57

Fran Dios

3,482
2
15
26

Thanks Fran, Yes I am using beta8, I changed to "nextItems" and it's still not working, is there any way to debug and troubleshot the problem? – Reza Mar 27 '16 at 17:27
BTW the method only called the first time, I mean if you scroll to end you see the alert, then if you go up and scroll down again no message any more, should it be like this or it's a bug? – Reza Mar 27 '16 at 17:33
Update: I have downloaded the quickstart from the website and replaced the lib\onsenui with beta8, then I changed the page in the Material.html file as ` ` and I add the `nextItems` in the controller, and still it's not working, then I compared onsen.js and onsen-angualr.js files from cdn and my downloaded version and they are same too. – Reza Mar 27 '16 at 18:03
Update2: in Quickstart if I remove the template it works – Reza Mar 27 '16 at 18:30
Please take a look at this updated code pen: http://codepen.io/RezaRahmati/pen/yOXjJo – Reza Mar 27 '16 at 18:33
@RezaRahmati I have added a `done` function to the example. I think now it works as expected. – Fran Dios Mar 28 '16 at 02:41
There is no difference, just call `done` function in `nextItems` as I did in my example. – Fran Dios Mar 28 '16 at 15:57
Sorry, I think two different problems are mixed here, I mean the infinite scroll doesn't work at all when there is `template` no matter with done or without done http://codepen.io/RezaRahmati/pen/yOXjJo – Reza Mar 28 '16 at 16:18
http://codepen.io/frankdiox/pen/yOoBWd I can see the alert there everytime I scroll. Isn't that what you want? – Fran Dios Mar 29 '16 at 02:16
In your first codepen I can see the alert, but in http://codepen.io/frankdiox/pen/yOoBWd I see NO alert (I tried in FF and Chrome) – Reza Mar 29 '16 at 12:37
Please see my prev comment :) – Reza Mar 30 '16 at 20:37
It actually worked just some times. Finally it stopped working after few times testing it again. There was a bug in the Angular bindings and has been fixed in master branch. You can test now this link: http://codepen.io/IliaSky/pen/wGqRRz – Fran Dios Mar 31 '16 at 06:47
Yes, its working now, how can I make it work ? (since you are using this js https://www.dropbox.com/s/y4y1eha61hi69jp/onsenui.js?dl=1) is it Ok if I make a copy of this for my self? – Reza Mar 31 '16 at 12:27
It's better if you download the latest build: https://onsen.io/download.html#latest-build I will update now the answer. – Fran Dios Mar 31 '16 at 12:59

I cannot make infinite-scroll working on Onsen 2

1 Answers1