Question

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

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

我没有公开网址来举例说明JsFiddle或Plunker。

这是我的代码

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

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

谢谢。

Answer 1

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

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

您可以详细了解浮动广告的工作方式：http://css-tricks.com/all-about-floats/

高度导致ng Infinite Scroll中的div标记出现问题

1 个答案: