Question

我用无限滚动页面加载了更多脚本我正在使用离子角度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

您的控制器只在第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个页面，因此您也应该添加一个检查。

角度js无限滚动问题使用离子

1 个答案: