修改

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>

修改

如果您需要更多装载物品，您可以看到如何更改每个页面的加载项目数量＆＃34;从virtual repeat demo开始，您可以看到this.PAGE_SIZE = 50;更改此项，您可以设置要加载的项目数量。

Answer 2

因此，经过研究后，您可以在source code内更改要呈现的附加项目数。

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

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

/ ** *在内部可见区域上方和下方渲染的其他元素数量 *虚拟重复容器的*。滚动时，数字越大，闪烁越少 *在Safari中非常快，但具有更高的渲染和脏检查成本。 * @const {number} * / var NUM_EXTRA = 3;

角度材质 - 虚拟重复，增加要渲染的其他元素

2 个答案:

修改