Akis_Tfs Akis_Tfs - 11 months ago 195
AngularJS Question

Angular Material - Virtual Repeat, increase aditional elements to render

Using virtual repeat for a long list with images, this is the code:

<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>

Virtual repeat works with dynamic reuse of rows visible in the viewport area. I can see that the visible rows are 6 in total. How can i increase them to lets say 15 or 20 so that i have less flicker in my list?


So after a research it looks that you can change the number of aditional items to render from inside the source code.

There you can find the variable var NUM_EXTRA = 3;

By changing this to a larger number you can have more list items rendered.

/** * 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;