如何創建無限滾動數據的網格列表？

Question

我正在構建一個網頁，顯示無限可滾動產品的網格列表。我已經實現了下列標記來實現這一目標：

<md-grid-list md-cols-gt-md="3" md-cols-md="2" md-cols-sm="1" md-gutter="12px" md-row-height="1:1"> 
    <div infinite-scroll="loadMore()" infinite-scroll-disabled="busy"> 
     <md-grid-tile ng-repeat="p in products"> 
      <md-grid-tile-header> 
       <h3>{{p.id}}</h3> 
      </md-grid-tile-header> 
     </md-grid-tile> 
    </div> 
</md-grid-list> 

（所有這些代碼構成md-tab-body的一部分）

我面對這裏的問題是，function loadMore()被自動調用。它不會等待我滾動到頁面的底部。我該如何解決這個問題？是loadMore()錯位在我的HTML？

Answer 1

檢查https://material.angularjs.org/latest/api/directive/mdVirtualRepeat

從material.angular.org

MD-虛擬重複指定使用虛擬滾動重複的元素。

虛擬重複是ng-repeat的有限替代，它只呈現 足夠的dom節點來填充容器並在用戶滾動時回收它們。數組，但不支持迭代的對象。跟蹤 作爲別名和（鍵，值）語法不受支持。