1

我正在使用 NIS 进行无休止的滚动，我实现了它，它工作正常，除了一个问题。就像我float: left用来维护 div 标签一样。但是在使用float它之后一次发送多个请求，但是当我删除float:left它时，它会发送我想要的单个请求。

我一次从服务器获得 20 个结果

我没有在 JsFiddle 或 Plunker 上提供示例的公共 URL。

这是我的代码

<!DOCTYPE html>
<html>

  <head>
  <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
    <script src="js/angular/lib/angular.min.js"></script>
    <script src="js/angular/lib/ng-infinite-scroll.min.js"></script>
    <script src="js/angular/customjs/endless_scroll.js"></script>
    <style type="text/css">
    .test{
      float:left;
    }
    </style>
  </head>

  <body ng-app="myApp">
    <div ng-controller='DemoController'>
      <div id="scroll" infinite-scroll='reddit.nextPage();' 
      infinite-scroll-container="'scroll'"
      infinite-scroll-disabled='reddit.stopscript'   
      infinite-scroll-distance='2'>             

      <div ng-repeat='item in reddit.items'>
           <div class="test">
           <div style="height:30px;width:200px; border-style:solid;border-width:medium;">{{item.bookmark_id}}</div>
          <div style="height:100px;width:200px; border-style:solid;border-width:medium;">{{item.bookmark_title}}</div>
      </div>
      </div>
    </div>
    <div ng-show='reddit.busy'>Loading data...</div>
    </div>
  </body>
</html>

这是我的控制器

var myApp = angular.module('myApp', ['infinite-scroll']);

myApp.controller('DemoController', function ($scope, Reddit) {
  $scope.reddit = new Reddit();
});

myApp.factory('Reddit', function ($http) {
  var Reddit = function () {
   this.items = [];
   this.busy = false;
   this.stopscript = false;
  };

Reddit.prototype.nextPage = function () {

  if (this.busy){
   return;
  }
 else{
    this.busy = true;

 var url = "http://example.com/get_recent_articles/";   
  $http.get(url).success(function (data) {
    if (data.recently_added.bookmarks.length == 0) {

        this.stopscript = true;
    }
    else {               
        this.items.push.apply(this.items, data.recently_added.bookmarks);             
     }
     this.busy = false;
    }.bind(this));
   }
 }; 
 return Reddit;
});

有人可以帮我解决这个问题吗？

谢谢你。

4

1 回答 1

3

当您浮动元素时，父元素会折叠。我假设您的ng-show元素是触发加载的元素，因此您总是希望它位于内容下方（这样当您滚动到它时，它会触发内容加载）。这意味着您需要在父级上使用 clearfix，以便它随着浮动内容展开，而不是折叠。

#images::after {
  display: block;
  clear: both;
  content: " ";
  width: 0;
  height: 0;
}

你可以在这里了解更多关于花车如何工作的信息：http: //css-tricks.com/all-about-floats/

于 2014-12-08T07:13:26.680 回答