Does it support ion-infinite-scroll?

[TonyLuo]

hi @djett41 , I like this plugin and plan to apply it in my project. I would like to know if it support on-infinite-scroll ? do you have any sample for using it with ion-infinite-scroll ? thanks so much.

[djett41]

thanks @TonyLuo . I'm not sure I have never tried it with infinite scroll, but I don't see why it wouldnt? Give it a try and if it doesn't work then we can reopen this issue.

[ghost]

It works with infinite scroll, it's on my production for weeks.

On Monday, 24 August 2015, Devin Jett notifications@github.com wrote:

thanks @TonyLuo https://github.com/TonyLuo . I'm not sure I have never tried it with infinite scroll, but I don't see why it wouldnt? Give it a try and if it doesn't work then we can reopen this issue.

— Reply to this email directly or view it on GitHub https://github.com/djett41/ionic-scroll-sista/issues/4#issuecomment-133966475 .

Sent from iPhone - Enjoy the auto-correct mistakes and typos.

[djett41]

nice thanks @ukalan !! I'm closing this issue

[TonyLuo]

thanks @djett41 @ukalan . I try it, it works with one little issue: the total data length is 50, load 5 items each time. when scroll down, header and tab bar will slide out of the view and load more data. but when loading the 30th items, the header and tab bar will slide back in the view, and they will not slide out again when scroll down to load the rest data. Is anything I do in wrong way ?

controllers.js

function getItems () {
    var items = [];
    for (var x = 0; x < 5; x++) {
      items.push({text: 'This is item number ' + x + ' which is an ' + (x % 2 === 0 ? 'EVEN' : 'ODD') + ' number.'});
    }
    $scope.items = items;
  }
 $scope.refreshItems = function () {
    $timeout(function () {
      getItems();
      $scope.noData = false;
      $scope.$broadcast('scroll.refreshComplete');
    }, 1000);
  };

$scope.loadMore = function () {
    console.log("loadMore starting")
    $scope.noData = false;
    var length = $scope.items.length || 1;
    if(length > 49){
      $scope.noData = true;
      $scope.$broadcast('scroll.infiniteScrollComplete');
    }
    else{
      for (var x = 0; x <  5; x++) {
        console.log("load more",$scope.items.length);
        $scope.items.push({text: 'This is item number ' + $scope.items.length + ' which is an ' + ($scope.items.length % 2 === 0 ? 'EVEN' : 'ODD') + ' number.'});

      }
      console.log("loadMore completed")
      $scope.$broadcast('scroll.infiniteScrollComplete');
    }
  };

content.html

<ion-content scroll-sista class="has-subheader">

    <ion-refresher pulling-icon="ion-arrow-down-b" on-refresh="refreshItems()">
    </ion-refresher>

    <ion-list>
      <ion-item collection-repeat="item in items" >
        <p>{{item.text}}</p>
      </ion-item>
    </ion-list>
    <ion-infinite-scroll
      ng-if="!noData"
      on-infinite="loadMore()">
    </ion-infinite-scroll>
    <div ng-if="items !== undefined && !items.length" class="no-results">
      <p>No Results</p>
    </div>
 </ion-content>

[hkalancheung]

try:

try to make the item size longer? or adjust the distance directive to see if it will help.

[TonyLuo]

@hkalancheung sorry for late reply. i tried your advice, but it didn't work