Eğik Malzeme - Sanal tekrarlayın, görüntülerle uzun bir liste için <a href="https://material.angularjs.org/latest/api/directive/mdVirtualRepeat" rel="nofollow">virtual repeat</a> kullanma

Question

işlemek için ilave unsurları artırmak, bu kod şudur:

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

Sanal tekrar viewport alanda görünür satırların dinamik yeniden kullanımı ile çalışır. Görünür satırların toplamda 6 olduğunu görebiliyorum. Listemde daha az titremenin olması için 15 veya 20 demek için onları nasıl artırabilirim?

Answer 1

Bir araştırmadan sonra, source code içinden oluşturulacak öğe öğelerinin sayısını değiştirebileceğiniz anlaşılıyor.

Orada size render daha liste öğesi olabilir daha büyük bir sayıya bu değiştirerek değişken var NUM_EXTRA = 3;

bulabilirsiniz.

/** * ek elemanların sayısı yukarıda ve * sanal tekrar kabın içinde görünür alanının altında bir hale getirilir. Daha yüksek bir sayı, Safari'de * çok hızlı kaydırma yaparken daha az titremeye neden olur, ancak daha yüksek bir görüntü işleme ve kirli kontrol maliyeti ile gelir. * @const {number} */ var NUM_EXTRA = 3;

Answer 2

Yalnızca kapsayıcının yanında daha fazla satır aldığınız şekilde div yüksekliğini değiştirin. Eğer yükleme öğeler için daha fazla ihtiyaç

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

DÜZENLEME

Eğer this.PAGE_SIZE = 50; bu miktarı ayarlayabilirsiniz değişen görebilirsiniz orada virtual repeat demo gelen "sayfa" başına yüklenen öğe sayısını değiştirmek için nasıl görebilirsiniz yüklenecek öğeler.