Question

我试图使用无限卷轴，它可以工作，但不是我想要的方式。当我打开页面时，它会无限地加载所有内容。但我希望它在我打开页面时只加载15张图片，然后当我通过增加网址＆＃34;索引＆＃34;滚动到底部时再加载15张图片。

  angular.module('home', ['infinite-scroll'])
    .controller('anasayfa', ['$scope', '$http',
      function ($scope, $http, $location) {

          $scope.method = 'GET';

          var index = 0;
          $scope.url = 'http://api.donanimhaber.com/api/v1/site/NewsSite?pageIndex=' + index + '&pageSize=15';

          $scope.loadCompleted = true;
          $scope.loadMore = function () {

                  if (index > 0) {

                      if ($scope.loadCompleted == false) return;

                      $scope.loadCompleted = false;

                      $http({ method: $scope.method, url: $scope.url }).
                       then(function (response) {
                           $scope.status = response.status;

                           for (var i = 0; i < response.data.Data.length; i++) {
                               $scope.data.push(response.data.Data[i]);
                           }
                           index++;
                           $scope.loadCompleted = true;
                       }, function (response) {
                           $scope.data = response.data || "Request failed";
                           $scope.status = response.status;
                       });
                  }
          };


          $scope.code = null;
          $scope.response = null;

          $http({ method: $scope.method, url: $scope.url }).
            then(function (response) {
                $scope.status = response.status;
                $scope.data = response.data.Data;
                index++;
            }, function (response) {
                $scope.data = response.data || "Request failed";
                $scope.status = response.status;
            });


      }]);

我该如何解决这个问题？感谢。

// Index.cshtml

@{
    Layout = null;
}

<!DOCTYPE html>
<html ng-app="home">
<head>
    <meta charset="utf-8" />

    <title>Home</title>
</head>

<body ng-controller="anasayfa">
    <div infinite-scroll="loadMore()" infinite-scroll-distance="0" ng-view auto-scroll>
        <div class="home" ng-repeat="d in data">
            <div class="news">
            <p class="topic">{{d.Title}}</p>
            <a href="/detay{{d.Url}}"><img class="image" src="{{d.Image}}" /></a>
        </div>
    </div>
        </div>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.0.0.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ngInfiniteScroll/1.2.2/ng-infinite-scroll.min.js"></script>
    <link href="~/Content/Site.css" rel="stylesheet" />

    <script src="/Scripts/Haberler.js"></script>
</body>
</html>

即使不移动滚动条，无限滚动也会保持加载所有内容

0 个答案: