CODEWITHSUNDEEP
onsen-uionsen-ui2
Reza
Reza

Reputation: 19863

I cannot make infinite-scroll working on Onsen 2

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

Upvotes: 1

Views: 997

Answers (1)

Fran Dios
Fran Dios

Reputation: 3482

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();
}

Upvotes: 2

Related Questions