NativeScript-Vue 2.0: Back to the Vueture (Webinar) is now on YouTube
ListView

This is an overview of the most common usage of ListView. For more information about the available properties, methods, or events, head over to the complete API documentation for ListView.

<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) текущего элемента
  • $eventrue, если индекс текущего элементы четный
  • $oddtrue, если индекс текущего элементы четный

Важное примечание о 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.

Свойства

ИмяТипОписание
forStringПредоставляет выражение для итерирования по элементам.
Например:
  • item in listOfItems
  • (item, index) in listOfItems
  • item in [1, 2, 3, 4, 5]
itemsArray<any>Массив элементов, которые отображены в <ListView>.
Это свойство только для продвинутого использования. Используйте вместо него свойство for.
separatorColorColorЗадает цвет линии разделителя. Установите его в значение transparent для удаления.

События

ИмяОписание
itemTapСрабатывает тогда, когда нажат элемент в <ListView>. Для получения доступа к нажатому элементу используйте event.item.

Методы

ИмяОписание
refresh()(Скоро) Заставляет <ListView> перезагрузить все его элементы.

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

AndroidiOS
android.widget.ListViewUITableView
Contributors