Question

从json API检索时，我在AngularJS中遇到无限滚动问题。我明白，不是重写变量，我必须把它推到我试过的数组中，但后来我的结果消失了。另一件事是滚动功能将被调用很多次，因为它不能记录数字var，或者它会增加太多次而且我会错过数据。

以下是我所拥有的：的index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>API</title>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"></script>
  <script src="script.js"></script>
    <script src="ng-infinite-scroll.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

</head>
<body ng-app="httpExample">
  <div ng-controller="FetchController as ctrl">
  <select ng-model="method">
    <option>GET</option>
    <option>JSONP</option>
  </select>
  <input type="text" ng-model="url" size="80"/>
  <button id="fetchbtn" ng-click="fetch()">fetch</button><br>
  <pre>http status code: {{status}}</pre>


  <div class="row">
  <div class="col-sm-6 col-md-4" infinite-scroll="fetch()" infinite-scroll-distance="1" ng-repeat="MovieID in data">
    <div class="thumbnail">
      <img src="{{MovieID.CoverImage}}" alt="...">
      <div class="caption">
        <h3>{{MovieID.MovieTitleClean}}</h3>
      </div>
    </div>
  </div>

</div>

</div>
</body>
</html>

和script.js

angular.module('httpExample', ['infinite-scroll'])
  .controller('FetchController', ['$scope', '$http', '$templateCache',
    function ($scope, $http, $templateCache) {
      $scope.method = 'GET';
      $scope.url = 'https://yts.re/api/list.json?limit=20&quality=720p&rating=5&sort=seeds&set=1';
      number=1;
      $scope.fetch = function() {
        $scope.code = null;
        $scope.response = null;


$scope.url = 'https://yts.re/api/list.json?limit=30&quality=720p&rating=5&sort=seeds&set=' + number;
        $http({method: $scope.method, url: $scope.url, cache: $templateCache}).
          success(function(data, status) {
            $scope.status = status;
            $scope.data = data.MovieList;
            number++;
            console.log(number);
          }).
          error(function(data, status) {
            $scope.data = data || "Request failed";
            $scope.status = status;
        });
      };
    }]);

Answer 1

我只是试着希望这会有所帮助。

与VIEW一样：

<div class="row">
  <div class="col-sm-6 col-md-4" infinite-scroll="fetch()" infinite-scroll-distance="1" >
    <div class="thumbnail" ng-repeat="MovieID in data">
      <img src="{{MovieID.CoverImage}}" alt="...">
      <div class="caption">
        <h3>{{MovieID.MovieTitleClean}}</h3>
      </div>

      <div style='clear: both;'></div>
    </div>
  </div>

的script.js

angular.module('httpExample', ['infinite-scroll'])
  .controller('FetchController', ['$scope', '$http', '$templateCache',
    function ($scope, $http, $templateCache) {
      $scope.method = 'GET';
      $scope.url = 'https://yts.re/api/list.json?limit=20&quality=720p&rating=5&sort=seeds&set=1';
      number=1;
      $scope.data=[];
      $scope.it=[];
      $scope.fetch = function() {
        $scope.code = null;
        $scope.response = null;


       $scope.url = 'https://yts.re/api/list.json?limit=30&quality=720p&rating=5&sort=seeds&set=' +     number;


        $http({method: $scope.method, url: $scope.url}).
          success(function(data, status) {
            $scope.status = status;
             var items = data.MovieList;
             for (var i = 0; i < items.length; i++) {
               $scope.data.push(items[i]);
           }

            console.log($scope.data);
            number= number+1;
          }).
          error(function(data, status) {
            $scope.data = data || "Request failed";
            $scope.status = status;
        });
      };
    }]);

Answer 2

请参阅有关实施无限滚动分页的详细解释的博客http://bluepiit.com/blog/angularjs-infinite-scroll-pagination/。是的，您需要将结果推送到数组中，以便可以渲染。

当您调用滚动事件时，您需要标记一个标志以防止重复请求，例如.-

scope.loadMoreCourses = function () {
if (scope.loadingResult) {
return;
}

并且一旦检索到你的结果，你就可以关闭这个标志，这时候结果会被渲染，你不会得到更多的滚动底部事件：

scope.pagination.currentPage = scope.pagination.currentPage + 1;
scope.offset = (scope.pagination.currentPage - 1) * scope.pagination.pageSize;
scope.limit = scope.pagination.pageSize;
scope.resultList = CourseService.courses.list({offset:scope.offset, limit:scope.limit});
scope.loadingResult = false;

详情请参阅上述博客。

angularjs无限滚动显示数据

2 个答案: