Question

我的代码中有什么问题？我使用API获取数据，然后当无限滚动时，API数据立即出现在滚动

之前

<body ng-controller="MyCtrl">

    <ion-header-bar class="bar-positive">
      <h1 class="title"><span class="badge badge-assertive">{{items.length}}</span> Items loaded</h1>
    </ion-header-bar>

    <ion-content>

      <ion-list>
        <ion-item ng-repeat="item in items" 
                  item="item"
                  href="#/item/{{item.id}}">
          Item {{ item }}
        </ion-item>
      </ion-list>
      <ion-infinite-scroll
        on-infinite="loadMore()"
        distance="10%">
      </ion-infinite-scroll>
    </ion-content>

JS

.controller('MyCtrl', function($scope,$http) {

     $http.get("#",{withCredentials: true})
        .success(function(response){
            $scope.items=response.products;
        }).error(function(response)
            {
                $scope.status = response || "Request failed";
            });

  $scope.items = [];
  $scope.loadMore = function() {

var data = [];

var l = $scope.items.length

    for ( var i = l; i < l+5; i++) {
      data.push(i);
    }
    $scope.$apply(function () {
      $scope.items = $scope.items.concat(data);
    });
    $scope.$broadcast('scroll.infiniteScrollComplete');
  };


});

我遵循此代码 http://codepen.io/shprink/pen/jukJh

Answer 1

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

参见上面的语法，区别在于ng-if="isMoreItems"。

现在在您的控制器中。

在顶部声明$scope.isMoreItems = false;。并打个像

一样的支票

var l = $scope.items.length
if(l == 0){
  $scope.isMoreItems = false;
}else{
   for ( var i = l; i < l+5; i++) {
      data.push(i);
   }
   $scope.$apply(function () {
     $scope.items = $scope.items.concat(data);
   });

   $scope.isMoreItems = true;

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

要记住一些要点：

从您的http请求中获取分页数据
根据您的要求在代码中管理isMoreItems变量
拨打$scope.$broadcast('scroll.infiniteScrollComplete');电话每当滚动加载完成。

如果您遵循以上几点，您的问题应该解决。

Answer 2

看看这个......

var offset = 1; 
var max = 10; 
var customer = 2;
vm.customerList = [];
var url= '/some/some/?customer='+'customer'+'&offset='+offset+'&max='+max;
$http.get(url).success(function (response) { 
var customerResponse = response.data;    
angular.forEach(customerResponse,function(response){    
vm.customerList.push(response);  
$scope.$broadcast('scroll.infiniteScrollComplete'); });
        }).error(function (err) {
    $scope.$broadcast('scroll.infiniteScrollComplete');
      })

Ionic Infinite Scroll with http

2 个答案: