Question

我有一个包含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>

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

工作示例更为明显。

请帮我完成这件事。

提前致谢。

Answer 1

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

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

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

这会导致循环停止，直到 j小于或等于productList.length AND {{1} }小于productList.length 。

自1000数组初始化后，其长度变为productList且9始终小于9，您将最终加载（推送）所有首次调用1000函数时response.data.products中的数组项。

解决方案

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

loadMore()

无限滚动似乎不起作用（首先滚动输入数据正在加载）

1 个答案:

解决方案

Demo