1

我有一个包含 1000 个产品的 JSON 数据。

我正在尝试使用无限滚动在我的网页上将这些产品显示为 3*3 网格。

仅在第一次滚动时，整个数据都会被加载。

我的代码如下所示：

<!DOCTYPE html>
<html>
<head>
<style>
img{
width : 200px;
height : 200px;
display : inline-block;
margin-right : 5 ;
margin-bottom : 5;
}
</style>
<meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src = "ng-infinite-scroll.js"></script>

</head>
<body>
<div ng-app='myApp' ng-controller='DemoController'>
<div infinite-scroll="loadMore()" infinite-scroll-distance="0" infinite-scroll-disabled = "false">
  <div  ng-repeat="product in productList" class="col-md-4 panel panel-info">
     <p class = "panel-heading">#{{product.id}}&nbsp;&nbsp;{{product.name}}</p>
    <img ng-src ="{{ product.img }}" alt = "{{ product.img}}"  class="imageStyle">
    <h3> <small>{{product.cat}}</small></h3>
    <p class="text-danger">{{product.price | currency:'&#8377;'}}</p>
    </div>
    </div>
    <div style='clear: both;'></div>
</div>
<script>
var myApp = angular.module('myApp', ['infinite-scroll']);
myApp.controller('DemoController', function($scope,$http) {

    $http.get('https://test-prod-api.herokuapp.com/products').then(function(response){
    //console.log(response.data);
    //$scope.images = response.data.products;
    $scope.productList = [];
    for(var i=0;i<9;i++){
    $scope.productList.push(response.data.products[i]);
    }
    console.log($scope.productList.length);
    $scope.loadMore = function() {
  console.log('called' + $scope.productList.length);
    for(var j = $scope.productList.length; j <= $scope.productList.length+9 && $scope.productList.length<1000; j++) {
    console.log("j value  "+j);
     $scope.productList.push(response.data.products[j]);
   }
    console.log('images array length  '+$scope.productList.length);
 };

    });

  //$scope.images = [1, 2, 3, 4, 5, 6, 7, 8];



});
</script>
</body>
</html>

请建议我在上面的代码中需要进行的更改。

工作示例更可观。

请帮我完成这件事。

提前致谢。

4

1 回答 1

0

仅在第一次滚动时，整个数据都会被加载。

这是由于错误的循环终止条件：

j <= $scope.productList.length+9 && $scope.productList.length < 1000

这将导致循环不会停止，直到j小于或等于productList.length AND productList.length小于1000。

由于在productList数组初始化之后，它的长度变了9并且9总是小于1000，所以你最终会response.data.products在第一次调用loadMore()函数时加载（推送）所有数组项。

解决方案

ngInfiniteScroll相反，请在您的函数中尝试以下内容（如 文档中的） loadMore()：

var lastIndex = $scope.productList.length-1;
for (var j = 1; j <= 9; j++) { // load 9 more on every call to the loadMore function
   $scope.productList.push(response.data.products[lastIndex + j]);
}

演示

于 2016-06-06T23:22:28.987 回答