Ionic 2 - 仮想スクロールが期待通りに動作しない

Question

私が実装した仮想スクロールが奇妙に見える理由はわかりません。

私は単語のリストを持っており、それらをページに表示したいと考えています。以前はforループを使ってこれらの単語を繰り返しましたが、スクロールのパフォーマンスはアンドロイドデバイスでは恐ろしいものでした。だから私は、イオンの公式文書に記載されているように、基本的な仮想スクロールを実装することに決めました。

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

これは私が反復しようとしているデータです。私は言葉しか必要としません、他の情報はありません。私の仮想スクロール用

コードは次のようになります。私のWebブラウザで

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

、私が得た結果はひどいです。

Pic 1：ユーザーがすべての韻をフェッチする単語を検索しますが、レスポンスがnullでなくてもデータは表示されません。

ピック2：私は別のページに移動して戻ってきた場合、私は韻のいくつかを参照してください。

ピック3：私はステップ2を繰り返すか、少し下にスクロールすると、私はいくつかのより多くの単語を参照してください。とても奇妙に見えます。

私は、仮想スクロールがこのような演技されている理由はわかりません。誰かが私が間違いを犯したのか、それとももっと良い解決策を教えてもらえますか？事前

Answer 1

で

おかげで、残念ながら、文書化されていない仮想スクロールを持ついくつかの問題があります。これらすべてを修正することで、正しい方向に向かうはずです。

定義済みの高さ

あなた[virtualScroll]のすべての祖先は、事前に定義された高さを持っている必要があります。仮想リストは、要素の高さを取得し、それに基づいて、セルにデータを入力します。高さが0の場合は、スクロールのバッファ領域を補う少数のセルだけが表示されます。インラインCSSを使用しないでください。ここでは簡単に例を示します。

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

あなたは私がapproxItemHeightを設定しています見ることができ、上記の例ではおおよそのアイテムの高さに

を定義します。これは、仮想リストの計算に役立つ重要なステップです。声明

場合

は、残念ながら、あなたがngIf、ticket内仮想スクロールを置くことができないでラップしないでください。コンポーネントのライフサイクルの始めに、仮想スクロールをレンダリングする必要があります。したがって、コンストラクタの時刻からtrueに等しい条件の内部に仮想スクロールをラップすると、その問題は存在しません。しかし、後で条件が真実になる場合は、実装を再設計する必要があります。

*ngIfから[ngClass]="virtualClass"を使用するように切り替えました。仮想スクロールを隠したいときは、virtualClass = 'virtual-hide'と設定します。これは、仮想スクロールの高さ、私たちが解決したい同じ問題が表示されませんので、あなたがdisplay: noneを使用することはできません

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

。上記のCSSは、要素が画面に表示され、実際にそこに表示されていない間に正しい量の領域を占めるようにする必要があります。このコードは、実装に基づいて調整する必要があります。

を確認してくださいアイテムは、仮想スクロールがDOMに常にあることを意味しますngIfからngClassを使用してへの切り替え

存在します。このため、items（[virtualScroll]の配列）が常に設定されていることを確認する必要があります。したがって、それが決してundefinedまたはnullでないことを確認してください。空である場合は[]に設定してください。