Fatal编程技术网
  • javascript/
  • Javascript angularjs infinte滚动显示数据

Javascript angularjs infinte滚动显示数据

javascript jquery angularjs

Javascript angularjs infinte滚动显示数据,javascript,jquery,angularjs,infinite-scroll,Javascript,Jquery,Angularjs,Infinite Scroll,在从json API检索时，AngularJS中的无限滚动出现了一些问题。我明白，我不需要重写变量，而必须将它放入我尝试过的数组中，但结果却不一致。另一件事是，scroll函数将被调用太多次，以至于该功能将被破坏，因为它将无法记录数字var，或者它将被增加太多次，并且我将丢失数据 以下是我所拥有的： index.html <!doctype html> <html lang="en"> <head> <meta charset="UTF-8">

在从json API检索时，AngularJS中的无限滚动出现了一些问题。我明白，我不需要重写变量，而必须将它放入我尝试过的数组中，但结果却不一致。另一件事是，scroll函数将被调用太多次，以至于该功能将被破坏，因为它将无法记录数字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>
我刚试过这个，希望能有所帮助

类似观点：

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


{{MovieID.MovieTitleClean}
Script.js

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

angular.module（'httpExample'，['infinite-scroll']））
.controller（'FetchController'、['$scope'、'$http'、'$templateCache'，
函数（$scope、$http、$templateCache）{
$scope.method='GET'；
$scope.url='1https://yts.re/api/list.json?limit=20&quality=720p&rating=5&sort=seeds&set=1';
数字=1；
$scope.data=[]；
$scope.it=[]；
$scope.fetch=函数（）{
$scope.code=null；
$scope.response=null；
$scope.url='1https://yts.re/api/list.json?limit=30&quality=720p&rating=5&sort=seeds&set=“+数字；
$http（{method:$scope.method，url:$scope.url}）。
成功（功能（数据、状态）{
$scope.status=状态；
var items=data.MovieList；
对于（变量i=0；i
请参阅它详细解释的关于实现无限滚动分页的博客。是的，您需要将结果推送到一个数组中，以便可以渲染它

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

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;
一旦检索到结果，则可以关闭此标志，此时将呈现结果，并且您将不会获得更多的滚动底部事件：

有关详细信息，请参阅上述博客。

我认为您只是在错误的地方重复。请尝试使用您的scoller Div添加ng repeat是的，我正在尝试类似的代码。唯一的问题是，当滚动时会发生这种情况：所以我会重复播放电影，而其他人现在正在播放。我就这么做了。谢谢兄弟！：） 
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;