如何创建无限可滚动数据的网格列表？

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()。它不等我滚动到页面底部。我该如何解决这个问题？我的HTML中loadMore()放错了位置吗？

Answer 1

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

来自material.angular.org

  

md-virtual-repeat指定使用虚拟滚动重复的元素。

     

虚拟重复是仅仅渲染的ng-repeat的有限替代品   足够的dom节点填充容器并将其作为用户回收   滚动。迭代支持数组，但不支持对象。跟踪   by，as alias，和（key，value）语法不受支持。