<ListView> - визуальный комопонент, отображающий список элементов, который монжно вертикально прокручивать (скроллить). Для установки того, как будет отображаться каждый компонент, вы можете использовать <v-template>.

<ListView for="item in listOfItems" @itemTap="onItemTap">
  <v-template>
    <!-- Отображает список с item label с заданными по умолчанию стилями. -->
    <Label :text="item.text" />
  </v-template>
</ListView>

Использование <ListView> с множеством блоков <v-template>

Компонент v-template используется для определения того, как часто каждый элемент списка отображается на экране.

Если вам необходимо отобразить один или несколько элементов списка иначе, чем остальные, то вы можете вложить их в дополнительные блоки <v-template> и использовать условия. Вы можете располагать сколько угодно много блоков <v-template> в <ListView>.

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

Когда вы создаете условные конструкции для <v-template>, вы можете использовать любое корректное JavaScript-выражение или любую из следующих вспомогательных функций (helpers):

• $index— индекс (index) текущего элемента
• $even—true, если индекс текущего элементы четный
• $odd—true, если индекс текущего элементы четный

Важное примечание о v-for

<ListView> не перебирает элементы списка, как вы ожидаете, если используете v-for. Вместо этого <ListView> только создает необходимые представления для отображения текущих видимых элементов на экране и переиспользует представления, которые уже скрыты с экрана во время прокрутки. Этот концепт называется view recycling и в основном используется в мобильных приложениях для улучшения производительности.

Это важно, потмоу как вы не можете полагаться на обработчиков событий внутри v-template. Вместо этого вам необходимо использовать событие itemTap, которые содержит в себе индекс нажатого элемента и сам элемент списка.

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

Примечание: если v-for используется на <ListView>, то в консоли будет выведено предупреждение и он будет преобразован в свойство for.

Свойства

События

Методы

Нативный компонент