JSON Antwort mit unendlich scroll

Question

Ich habe Probleme mit der unendlichen Scroll-Funktion. Jedes Mal, wenn ich scrollen loadMore Funktion zweimal aufgerufen und jedes Mal laden 2 Seite statt 1 Seite. In log siehe Laden I 2 und 3 Seite:

loadMore 2 
loadMore 3 

Dann Last 4 und 5 Seite:

loadMore 4 
loadMore 5 

Das ist mein Controller:

.controller('PostsCtrl', function($scope, $http, DataLoader, $timeout, $ionicSlideBoxDelegate, $rootScope, $log) { 

    var postsApi = $rootScope.url + 'posts'; 

    $scope.moreItems = false; 

    $scope.loadPosts = function() { 

    // Get all of our posts 
    DataLoader.get(postsApi).then(function(response) { 

     $scope.posts = response.data; 

     $scope.moreItems = true; 

     $log.log(postsApi, response.data); 

    }, function(response) { 
     $log.log(postsApi, response.data); 
    }); 

    } 

    // Load posts on page load 
    $scope.loadPosts(); 

    paged = 2; 

    // Load more (infinite scroll) 
    $scope.loadMore = function() { 

    if(!$scope.moreItems) { 
     return; 
    } 

    var pg = paged++; 

    $log.log('loadMore ' + pg); 

    $timeout(function() { 

     DataLoader.get(postsApi + '?page=' + pg).then(function(response) { 

     angular.forEach(response.data, function(value, key) { 
      $scope.posts.push(value); 
     }); 

     if(response.data.length <= 0) { 
      $scope.moreItems = false; 
     } 
     }, function(response) { 
     $scope.moreItems = false; 
     $log.error(response); 
     }); 

     $scope.$broadcast('scroll.infiniteScrollComplete'); 
     $scope.$broadcast('scroll.resize'); 

    }, 1000); 

    } 

    $scope.moreDataExists = function() { 
    return $scope.moreItems; 
    } 

    // Pull to refresh 
    $scope.doRefresh = function() { 

    $timeout(function() { 

     $scope.loadPosts(); 

     //Stop the ion-refresher from spinning 
     $scope.$broadcast('scroll.refreshComplete'); 

    }, 1000); 

    }; 

}) 

Wie loadMore einmal anrufen? Dies ist meine Vorlage:

<ion-view view-title="Posts"> 
    <ion-content> 
    <ion-refresher on-refresh="doRefresh()"></ion-refresher> 
    <ion-list> 
     <ion-item class="item-icon-right" ng-repeat="post in posts track by $index" href="#/app/posts/{{post.id}}" track> 
      <!-- <img ng-if="post.featured_image" ng-src="{{post._embedded['http://v2.wp-api.org/attachment'][0][$index].source_url}}" class="alignleft" /> --> 
      <h2 ng-bind-html="post.title.rendered"></h2> 
      <p ng-if="post.excerpt.rendered" ng-bind-html="post.excerpt.rendered"></p> 
      <i class="icon ion-chevron-right icon-accessory"></i> 
     </ion-item> 
    </ion-list> 

    <ion-infinite-scroll 
    ng-if="moreDataExists()" 
    on-infinite="loadMore()" 
    distance="1%" 
    immediate-check="false"> 
    </ion-infinite-scroll> 

    </ion-content> 
</ion-view> 

Answer 1

Sie sollten das infiniteScrollComplete Ereignis ausgestrahlt innerhalb des Rückrufs von DataLoader.get

Was die Get-Methode happenning ist ist assincronous ist, so dass Ihre Daten in die Liste aufgenommen werden, nachdem das Ereignis ausgelöst wird.

Versuchen Sie, Ihren Code zu ändern, und es sollte funktionieren.

DataLoader.get(postsApi + '?page=' + pg).then(function(response) { 

    angular.forEach(response.data, function(value, key) { 
     $scope.posts.push(value); 
    }); 

    if(response.data.length <= 0) { 
     $scope.moreItems = false; 
    } 

    // Place here 
    $scope.$broadcast('scroll.infiniteScrollComplete'); 

    }, function(response) { 
    $scope.moreItems = false; 
    $log.error(response); 
    }); 

Answer 2

Ich hatte dieses Problem auch konfrontiert. Hier sind einige Tipps, die ich verwendet, um es zu lösen

• Entfernen Sie die Ionen Auffrischung und sehen, ob es nur einmal
• ruft Wenn ja, dann die Entfernung entfernen und sofort Check aus der unendlichen Scroll
• In Ihrem Controller, entfernen Sie die Timeouts bei der api Aufruf
• und Broadcast diese beiden Ereignisse in Ihren Erfolg Rückruf
  • $ scope $ Broadcast ('scroll.infiniteScrollComplete.');
    
  • $ scope. $ Broadcast ('scroll.resize');