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.
O componente ListView exibe uma lista de rolagem vertical. Você pode definir diferentes v-template
para especificar como cada item na lista aparecerá.
<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>
No exemplo acima, o segundo template será usado se o index do item for ímpar. Por conveniência, você pode usar os helpers $index
, $even
e $odd
, mas conforme necessário, você pode usar qualquer expressão javascript válido para a condição if
dos v-template
.
Para aprender mais sobre o componente v-template
, veja a documentação do v-template
.
O ListView não percorre os itens como é esperado usando um loop v-for
. Em vez disso, ele só cria as views necessárias para mostrar os itens visíveis na tela, e é normalmente usado em aplicativos móveis para melhorar a performance. Isso é importante porque você não pode confiar nos eventos dentro do v-template
, você deve usar o evento itemTap
que contém o index do item tocado, assim como o item real da lista.
onItemTap(event) {
console.log(event.index)
console.log(event.item)
}
nome | tipo | descrição |
---|---|---|
for | String | Expressão para percorrer o itens, exemplo: - item in listOfItems - (item, index) in listOfItems - item in [1, 2, 3, 4, 5] |
items | Array<any> | Um array de itens para mostrar na ListView. Nota: Essa propriedade é apenas para uso avançado, recomendamos que use a propriedade for na maioria dos casos. |
separatorColor | Color | Define a cor da linha de separação. Defina transparent para removê-la. |
nome | descrição |
---|---|
itemTap | Emitido quando um item do ListView é tocado. Para acessar o item tocado, use event.item . |
Android | iOS |
---|---|
android.widget.ListView | UITableView |