İyonik 2 - sanal kaydırma beklendiği gibi çalışmıyor

Question

Uyguladığım sanal kaydırmanın neden garip görüneceğini bilmiyorum.

Sözcük listesi var ve bunları bir sayfada göstermek istiyorum. Daha önce bu kelimeleri bir for döngüsü kullanarak yineledim, ancak kaydırma performansı android cihazlarda korkunçtu. Bu yüzden iyonic resmi belgelerinde belirtildiği gibi temel sanal kaydırma yapmaya karar verdim.

http://rhymebrain.com/talk?function=getRhymes&word=baby

Bu

ben yineleme çalışıyorum veridir. Sadece kelimelere ihtiyacım var, başka bilgi yok. Benim sanal kaydırma için

Kod şöyle görünür: Benim web tarayıcısında

<ion-card *ngIf="words?.length > 0"> 
    <ion-card-header>rhymes with...</ion-card-header> 
    <ion-card-content> 
    <ion-list [virtualScroll]="words" [approxItemHeight]=" '500px' "> 
     <button *virtualItem="let word" ion-button round small> 
     {{word.word}} 
     </button> 
    </ion-list> 
    </ion-card-content> 
</ion-card> 

, aldığım sonuçlar korkunç. Bazı ekranları paylaşabilirim:

Pic 1: Kullanıcı tüm tekerlemeleri getirmek için bir kelime arar, ancak yanıt null olmadığında bile hiçbir veri gösterilmez.

Pic 2: Ben başka bir sayfaya gidin ve geri gelmek, ben tekerleme birkaç görüyoruz.

Pic 3: Ben biraz aşağı 2. adımı tekrarlamak veya kaydırma, ben birkaç kelime daha görüyoruz. Çok tuhaf görünüyor.

Ben sanal kaydırma böyle davranmaktadır neden hiçbir fikrim yok. Herkes bana bunun için ne gibi bir hata yaptığımı veya bunun için daha iyi bir çözüm olduğunu söyleyebilir mi? peşin maalesef belgelenmese sanal kaydırma ile bazı sorunlar var

Answer 1

yılında

teşekkürler. Tüm bunların düzeltilmesi sizi doğru yöne getirmelidir.

Önceden tanımlı Yükseklik

sizin [virtualScroll] tüm ataları önceden tanımlanmış bir yüksekliğe sahip olmalıdır. Sanal liste, elemanların yüksekliğini yakalar ve buna dayanarak hücreleri doldurur. Yükseklik 0 ise, hızla kaydırmanın tampon alanını oluşturan birkaç hücreyi dolduracaktır. Satır içi CSS kullanmayın, ancak basitlik için bir örnek. Eğer ben approxItemHeight ayarlıyorum görebilirsiniz yukarıdaki

<ion-content> 
    <div style="height:100%"> 
    <ion-list [virtualScroll]="items" approxItemHeight="50px"> 
     ... 
    </ion-list> 
    </div> 
</ion-content> 

örnekte Yaklaşık Öğe Yükseklik

tanımlayın. Bu, hesaplamalar ile sanal listeye yardımcı olan önemli bir adımdır.Bildirimi

Maalesef bir ngIf, ticket içindeki sanal kaydırma koyamazsınız

yılında sarın vermeyin. Sanal kaydırma işleminizin, bileşen yaşamınızın başlangıcında oluşturulması gerekir. Bu nedenle, sanal kaydırıcınızı, kurucunun yapıldığı andan itibaren doğru olan bir koşulun içine sardıysanız, sorun mevcut olmaz. Ancak, durumun bir kısmının doğru olması durumunda, uygulamanızı yeniden tasarlamanız gerekir.

Bunun için yaptığım şey [ngClass]="virtualClass" kullanmak için *ngIf kullanımından değiştirildi. Sanal kaydırmayı gizlemek istediğimde virtualClass = 'virtual-hide''u ayarlayacağım. Sanal kaydırır yüksekliğini hale getirmeyecek bu yana display: none kullanamaz

.virtual-hide { 
    overflow: hidden; 
    visibility: hidden; 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
} 

, aynı sorunu biz çözmek istiyoruz. Yukarıdaki CSS, öğenin ekranda görünmesine ve gerçekte orada görünmüyorken doğru miktarda yer almasına izin vermelidir. Bu kod, uygulamanıza bağlı olarak ayarlanması gerekebilir.

olun Öğeler sanal kaydırma DOM daima anlamına gelecektir ngIf den ngClass kullanarak geçiş

Var. Bu nedenle, items ([virtualScroll] dizisi) öğesinin her zaman ayarlandığından emin olmalısınız. Bu nedenle, undefined veya null asla olmadığından emin olun, boş olmasını istiyorsanız, bunun yerine [] olarak ayarlayın.