NativeScript/apps/tests/ui/list-view/list-view.md

nav-title, title, description, previous_url

nav-title	title	description	previous_url
list-view How-To	list-view	Examples for using list-view	/ApiReference/ui/list-view/HOW-TO

ListView

Using a ListView requires the ListView module. Other modules which will be used in the code samples in this article:

Binding the ListView items property to collection in the view-model.

<Page>
  {%raw%}<ListView items="{{ myItems }}" />{%endraw%}
</Page>

Attaching event handler for the ListView itemTap event.

<Page>
  {%raw%}<ListView items="{{ myItems }}" itemTap="listViewItemTap" />{%endraw%}
</Page>

### Attaching event handler for the ListView loadMoreItems event. ``` XML {%raw%}{%endraw%} ``` ### Define the ListView itemTemplate property. ``` XML {%raw%} {%endraw%} ``` ### Creating a ListView ### Using ListView with Array The itemLoading event is used to create the UI for each item that is shown in the ListView.

Note, that changing the array after the list view is shown will not update the UI. You can force-update the UI using the refresh() method.

Using ListView with ObservableArray

When using ObservableArray the list view will be automatically updated when items are added or removed form the array.

Responding to other events

ItemTap event

The event will be raise when an item inside the ListView is tapped.

LoadMoreItems event

The event will be raised when the ListView is scrolled so that the last item is visible. This even is intended to be used to add additional data in the ListView.