리스트뷰(ListView) 컴포넌트는 수직 스크롤 리스트에 아이템을 보여줍니다.
리스트에서 각 아이템이 어떻게 표시되는지를 지정하기 위해 다른 v-template를 설정할 수 있습니다.

<ListView for="item in listOfItems" @itemTap="onItemTap">
  <v-template>
    <Label :text="item.text" />
  </v-template>

  <v-template if="$odd">
    <Label :text="item.text" color="red" />
  </v-template>
</ListView>

위 예에서 두번째 템플릿은 아이템의 인덱스가 홀수일때 사용됩니다. 편의를 위해 $index, $even, $odd 헬퍼를 사용할 수 있습니다. 그러나 필요하다면 임의의 유효한 자바스크립트 표현식과 함께 v-template의 if 조건을 사용할 수 있습니다.

v-template 컴포넌트에 대해 더 자세이 배우려면 v-template 문서 를 확인하세요.

리스트뷰는 당신의 예상과 다르게 v-for 처럼 아이템들의 룹을 돌지 않습니다. 대신 리스트뷰는 단지 현재 스크린에 보일 수 있는 아이템을 표시하기 위해 필요한 뷰를 만들고 스크롤이 발생할 경우 이미 off-screen 되었던 뷰를 재사용합니다. 이 컨셉은 뷰 재활용(recycling)이라고 불리며 모바일 어플리케이션에서 퍼포먼스를 향상시키기 위해 흔히 사용됩니다. 이는 당신이 v-template 안에서 결합된 이벤트리스너에 의존할 수 없고 대신 탭된 아이템(리스트의 실제 아이템도 마찬가지)의 인덱스를 포함하는 itemTap 이벤트를 사용해야 하기때문에 중요합니다. (역자: 솔직히 뭔소린지 모르고 번역했습니다.)

onItemTap(event) {
  console.log(event.index)
  console.log(event.item)
}

Props

이벤트

네이티브 컴포넌트