使用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說，讓我在我的名單中少閃爍？

來源

2016-04-01 Akis

您是指虛擬重複或實際上可見容器的加載行大小？ – Konkko

我的意思是可見的容器，是的。我無法找到有關如何更改它的文檔中的任何內容。 – Akis

我的主要問題是列表閃爍，我想要更多的可見行以儘可能地防止。我想渲染比默認編號更多的項目 – Akis

因此經過一項研究後，您可以更改source code內要呈現的附加物品的數量。

在那裏你可以找到變量var NUM_EXTRA = 3;

通過這個改變對你能有更多的渲染列表項目數量較多。

/** * 額外的元素數量來呈現上方和下方的可見區域內虛擬重複容器的*。在Safari中快速滾動 *時，數字越大，閃爍越少，但渲染和髒檢成本較高。 * @const {number} */ var NUM_EXTRA = 3;

來源

2016-06-03 14:46:24 Akis

只需更改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那裏你可以看到this.PAGE_SIZE = 50;改變這一點，你可以設置的用量爲每「頁」加載項的數目要加載的項目。

來源

2016-04-01 16:54:38 Konkko

如果我設置'style =「height：10px;」'那麼我的列表就會被完全破壞，因爲沒有圖像可以適應10個像素的高度。另外，您所指的頁面大小是針對延遲加載的，我正在使用垂直使用示例 – Akis

那麼您想實現什麼？如果你不會改變div高度？通過給高度10px並不意味着它需要10px。這只是例如 – Konkko

感謝您的答案隊友，它看起來我正在尋找它在源代碼中 – Akis

角材料 - 虛擬重複，增加額外的元素來呈現

回答

編輯

相關問題