高度導致問題在ng無限滾動的div標記

我使用NIS做無盡的滾動，我實現了，它工作正常，除了一個問題。就像我使用float: left來維護div標籤一樣。但使用float後，它一次發送多個請求，但是當我刪除float:left時，它會發送我想要的單個請求。高度導致問題在ng無限滾動的div標記

我得到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; 
});

任何人可以幫助我解決這個問題？

謝謝。

來源

2014-12-08 abdulbarik

嘗試'顯示：內聯block'，而不是'浮動：left' – 2014-12-08 07:01:18

@VitorinoFernandes當我使用'顯示：直列block'那麼所有'Div'標籤垂直顯示 – abdulbarik 2014-12-08 07:04:29

浮動元素時，父級會摺疊。我假設您的ng-show元素是觸發負載的元素，因此您總是希望它位於內容的下方（以便在滾動到內容時觸發內容加載）。這意味着您需要在父級上使用clearfix，以便使用浮動內容進行擴展，而不是進行摺疊。

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

您可以瞭解更多有關如何花車在這裏工作：使用http://css-tricks.com/all-about-floats/

來源

2014-12-08 07:13:26

你能否清楚我的疑問，在哪裏放置這個圖像屬性？因爲我目前沒有使用'圖像ID'。 – abdulbarik 2014-12-08 07:26:41

@abarik嘗試'＃滾動「。 '＃images'只是一個例子;像我的文章描述你需要將它應用到浮動元素的父級。 – 2014-12-09 12:07:06

我明白了@Christian感謝您的回覆 – abdulbarik 2014-12-09 12:09:35

高度導致問題在ng無限滾動的div標記

回答

相關問題