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

【问题标题】：How to create grid list of infinitely scrollable data?如何创建无限滚动数据的网格列表？
【发布时间】：2016-02-11 01:08:20
【问题描述】：

我正在构建一个网页，该网页将显示无限可滚动产品的网格列表。我已经实现了以下标记来实现这一点：

<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 中放错了位置？

【问题讨论】：

你在使用一些实现了infiniteScroll指令的库吗？
我正在使用 ngInfiniteScroll

标签： angularjs angular-material nginfinitescroll

【解决方案1】：

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

来自 material.angular.org

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

虚拟重复是 ng-repeat 的有限替代品，它只呈现足够多的 dom 节点来填充容器并作为用户回收它们卷轴。迭代支持数组，但不支持对象。追踪不支持 by、as alias 和 (key, value) 语法。

【讨论】：

问题与平铺网格有关。我认为 Angular Material 的 mdVirtualRepeat 还不支持平铺视图。