Angular Material - Virtual Repeat，增加额外元素渲染

Question

使用 virtual repeat 用于包含图像的长列表，这是代码：

<md-virtual-repeat-container id="vertical-container" style="height: 100vh; width:100vw">
    <div class="panel panel-default favorite_listitem" md-virtual-repeat="item in favorites" ng-click="selectAd($event, item)">
        <div class="ad-image" style="background-image: url('{{item.data.thumb}}')"></div>
    </div>
</md-virtual-repeat-container>

虚拟重复使用视口区域中可见行的动态重用。我可以看到可见行总共有 6 行。我怎样才能将它们增加到 15 或 20 以便我的列表中的闪烁更少？

Answer 1

只需更改 div 的高度，这就是您在容器中获得更多行的方式。

<md-virtual-repeat-container id="vertical-container" style="height: 100vh; width:100vw">
    <div class="panel panel-default favorite_listitem" md-virtual-repeat="item in favorites" ng-click="selectAd($event, item)" style="height:10px;">
        <div class="ad-image" style="background-image: url('{{item.data.thumb}}')"></div>
    </div>
</md-virtual-repeat-container>

编辑

如果您需要更多的加载项，您可以查看如何从 virtual repeat demo 更改每个 "page" 的加载项数，您可以看到 this.PAGE_SIZE = 50; 更改此设置要加载的项目数量。

Answer 2

所以经过研究，您似乎可以更改要从 source code 内部呈现的附加项目的数量。

在那里你可以找到变量var NUM_EXTRA = 3;

通过将其更改为更大的数字，您可以呈现更多的列表项。

/** * Number of additional elements to render above and below the visible area inside * of the virtual repeat container. A higher number results in less flicker when scrolling * very quickly in Safari, but comes with a higher rendering and dirty-checking cost. * @const {number} */ var NUM_EXTRA = 3;

Angular Material - Virtual Repeat，增加额外元素渲染

Angular Material - Virtual Repeat, increase additional elements to render

angularjs

angular-material

编辑