<ListView>は要素を垂直方向にスクロールができるよう表示するUIコンポーネントです。リストが個別の要素をどのように表示するかは、 <v-template>コンポーネントを使って設定できます。

<ListView for="item in listOfItems" @itemTap="onItemTap">
  <v-template>
    <!-- Shows the list item label in the default color and style. -->
    <Label :text="item.text" />
  </v-template>
</ListView>

<ListView>を複数の<v-template>ブロックと使う

v-templateコンポーネントそれぞれのリストの要素が画面にどのように表示されるかを設定するために使われます。

もしリストの要素を他とは別の見た目にしたい場合、追加の<v-template>ブロックで囲って調節できます。<ListView>の中では必要な数だけ<v-template>ブロックを使用できます。

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

  <v-template if="$odd">
    <!-- For items with an odd index, shows the label in red. -->
    <Label :text="item.text" color="red" />
  </v-template>
</ListView>

<v-template>で分岐を使う場合、正当なJavaScriptの表現か以下のヘルパーが使えます:

• $index— 現在の要素のインデックス
• $even— 現在の要素のインデックスが偶数の時true
• $odd—現在の要素のインデックスが奇数の時true

v-forについての重要な注意

<ListView>はv-forの挙動のように要素のリストをループしません。その代わりに<ListView>は現在スクリーンで見える要素のみを描写し、スクロールで画面外に出たviewを再利用します。これはview recyclingと呼ばれるコンセプトで、モバイルアプリのパフォーマンスを改善するために用いられているものです。

v-template内で紐付けられたイベントリスナーに頼ることができないので、これは重要なことです。代わりに、 タップされた要素のインデクスと、リストから取得する本当の要素を内包するitemTapイベントを利用する必要があります。

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

注意: v-forが<ListView>の中で使われた場合コンソールに注意が表示され、forプロパティに書き換えられます。

Props

Events

Methods

Native component