javascript - 使用ionic的angular js无限滚动问题

Question

我使页面具有无限滚动页面加载更多脚本我正在使用 ionic angular js 来处理我的代码问题是当页面到达底部时它从开始重新启动

下面是html代码:

<ion-content class="has-header">

<ion-list>
    <ion-item ng-repeat="item in items">
      Item : {{ item.username }}
    </ion-item>

</ion-list>
<ion-infinite-scroll ng-if="!noMoreItemsAvailable" on-infinite="loadMore()" distance="10%"></ion-infinite-scroll>

</ion-content>

和js代码

angular.module('ionicApp', ['ionic'])
    .controller('MyCtrl', function($scope,$http) {
         $scope.noMoreItemsAvailable = false;

          $scope.loadMore = function() {

            $http.get('http://serverurl/a.php?page='+$scope.items.length).success(function(items) { 
                //$scope.username = items;
                $scope.items = items;
                //$scope.items.push(items);
                console.log(items)
                $scope.$broadcast('scroll.infiniteScrollComplete');
            });

          };

          $scope.items = [];
    });

请检查 codepen 上的代码:http://codepen.io/gauravcoder/pen/dGZbZK?editors=101

Answer 1

您的 Controller 仅在第 0 页或第 10 页发出两个请求。因为您正在检查长度。

这里是一个稍微修改过的代码，它可以工作，但是你应该以更好的方式实现分页。这只是给你一些想法的工作代码:

Plunker 链接 - http://codepen.io/gauravcoder/pen/obovaP

angular.module('ionicApp', ['ionic']).controller('MyCtrl', function($scope,$http) {
$scope.noMoreItemsAvailable = false;
$scope.currentPage = 0;

  $scope.loadMore = function() {
    if($scope.currentPage == 3) {
       //no more items
       $scope.$broadcast('scroll.infiniteScrollComplete');
        $scope.noMoreItemsAvailable = true;
       return;
    }

    $http.get('http://serverurl/a.php?page='+$scope.currentPage).success(function(items) { 
$scope.currentPage += 1;
        //$scope.username = items;
        $scope.items = $scope.items.concat(items);
        //$scope.items.push(items);
        console.log(items)
        $scope.$broadcast('scroll.infiniteScrollComplete');
    });

  };
$scope.items = [];
});

另请注意，由于您只有 3 个页面，因此您也应该为此添加一个检查。