带有http的离子无限滚动

Question

what wrong in my code guy? 我的代码专家有什么问题？ i get data using API, and then when infinite scroll, API data instantly appears before the scroll 我使用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 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');
  };


});

im follow this code http://codepen.io/shprink/pen/jukJh 我遵循此代码http://codepen.io/shprink/pen/jukJh

Answer 1

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

See above syntax, the difference is ng-if="isMoreItems" . 参见上面的语法，区别是ng-if="isMoreItems" 。

Now in your controller. 现在在您的控制器中。

declare it $scope.isMoreItems = false; 声明它$scope.isMoreItems = false; in the top. 前几名。 and put a check like 然后放一张支票

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');
}

Some points to remember: 需要记住的几点：

Get paginated data from your http request 从您的http请求中获取分页数据
Manage isMoreItems variable in code according to your requirement 根据需要管理代码中的isMoreItems变量
Make the call of $scope.$broadcast('scroll.infiniteScrollComplete'); 调用$scope.$broadcast('scroll.infiniteScrollComplete'); whenever scroll load finishes. 每当滚动加载完成时。

If you follow above points, your problem should solve. 如果您遵循以上几点，您的问题就可以解决。

Answer 2

Look at this ... 看这个 ...

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');
      })

带有http的离子无限滚动

问题描述

2 个解决方案

解决方案1
0 2015-11-18 06:14:04

解决方案2
0 2017-10-26 01:03:46

带有http的离子无限滚动

问题描述

2 个解决方案

解决方案1 0 2015-11-18 06:14:04

解决方案2 0 2017-10-26 01:03:46

解决方案1
0 2015-11-18 06:14:04

解决方案2
0 2017-10-26 01:03:46