1

NIS を使用してエンドレス スクロールを作成しています。実装したところ、1 つの問題を除いて正常に動作します。私がfloat: leftdivタグを維持するために使用しているように。しかし、使用後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 に答える