이오닉 2 - 가상 스크롤이 예상대로 작동하지 않습니다.

Question

내가 구현 한 가상 스크롤이 이상하게 보입니다.

나는 단어 목록을 가지고 있으며 페이지에 표시하고 싶다. 이전에 for 루프를 사용하여 이러한 단어를 반복했지만 스크롤 성능은 Android 기기에서 끔찍했습니다. 그래서 나는 이온의 공식 문서에서 언급 한 것처럼 기본적인 가상 스크롤을 구현하기로 결정했다.

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

이

내가 반복하기 위해 노력하고있어 데이터입니다. 나는 단어, 다른 정보가 필요하지 않습니다. 내 가상 스크롤에 대한

코드는 다음과 같습니다 : 내 웹 브라우저에서

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

가, 내가 가진 결과는 끔찍하다.

그림 1 : 사용자가 모든 운을 가져 오기 위해 단어를 검색하지만 응답이 null이 아니어도 데이터가 표시되지 않습니다.

그림 2 : 나는 다른 페이지로 이동 한 다음 다시 온다면, 나는 운율의 몇 가지를 참조하십시오.

그림 3 : 나는 아래로 조금 2 단계를 반복하거나 스크롤하면, 나는 몇 가지 더 말을 참조하십시오. 너무 이상해 보여요.

나는 가상 스크롤이처럼 행동하는 이유를 모르겠어요. 누구든지 내가 만든 실수 나 더 나은 해결책을 말해 줄 수 있습니까? 사전 불행하게도 설명하지 않은 가상 스크롤 몇 가지 문제가있다

Answer 1

에서

감사합니다. 이 모든 것들을 고치는 것은 올바른 방향으로 나아갈 것입니다.

미리 정의 된 높이

당신의 [virtualScroll]의 모든 조상들은 미리 정의 된 높이를 가지고 있어야합니다. 가상 목록은 요소 높이를 잡고이를 기반으로 셀을 채 웁니다. 높이가 0이면 빠르게 스크롤하는 버퍼 공간을 차지하는 몇 개의 셀만 채 웁니다. 인라인 CSS는 사용하지 말고 단순화를 위해 예를 들어 보겠습니다. 당신은 내가 approxItemHeight을하고 있어요 볼 수 있습니다 위의

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

이 예에서 대략적인 항목 높이

을 정의합니다. 이것은 가상 목록을 계산하는 데 도움이되는 중요한 단계입니다.문

불행하게도 당신이 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으로 설정하고 대신 []으로 설정하십시오.