Exibição em lista
O componente Exibição em lista serve para você exibir linhas de dados. Funciona como um contêiner: você pode inserir outros componentes nele e vincular dados a esses componentes.
Last updated
O componente Exibição em lista serve para você exibir linhas de dados. Funciona como um contêiner: você pode inserir outros componentes nele e vincular dados a esses componentes.
Last updated
O componente Exibição em lista exibe linhas de dados. Semelhante a Formulário, Modal e Drawer, também é um componente semelhante a um contêiner que pode conter outros componentes ou módulos. Para dados de exibição em lista, primeiro vincule os dados a um componente Exibição em lista e configure as regras de nomenclatura para os itens. Em seguida, você projeta a exibição da primeira linha arrastando e soltando os componentes, e esse layout será aplicado a todos os itens desse componente.
A seguir está uma demonstração da Exibição em lista, exibindo parte dos MELHORES LIVROS DE 2021 deGoodreads:
Arraste e solte o Exibição em lista na tela. Cada item contém uma Imagem, um Texto e um componente de Avaliação. Você pode atualizar a exibição de todo o componente Exibição em lista configurando o layout da primeira entrada.
Clique no componente Imagem para ver a fonte da imagem padrão.
O componente Exibição em lista recupera dados de uma matriz JSON de objetos e exibe um componente Imagem, Texto e Avaliação para cada entrada. Você também pode passar os resultados da consulta para uma Exibição em lista.
Os dados de um componente Exibição em lista aceitam dois tipos de valores: número e matriz.
Número: os números são processados como contagem de linhas e nenhum dado válido é passado para o componente Exibição em lista.
Array: O comprimento de um array é passado como contagem de linhas e cada entrada no array é processada como um objeto JS no formato JSON, correspondendo a uma linha no componente Exibição em lista. Por exemplo, os dados a seguir contêm duas linhas de dados, cada uma contendo quatro campos: avaliacao, titulo, url e cover.
Você pode visualizar os dados detalhados sobre o componente Exibição em lista, seus itens, propriedades, etc., no navegador de dados.
Depois de vincular dados válidos ao componente Exibição em lista e projetar seus componentes internos, você pode adicionar dados a esses componentes. Exibição em lista suporta variáveis locais currentItem e i. Observe que você só precisa alterar os dados da primeira linha, e as mesmas configurações são aplicadas às outras linhas automaticamente.
Você pode vincular um endereço URL estático ao componente Imagem para exibição de imagens; e como esse endereço URL é estático, a mesma imagem aparece em todas as linhas.
Você pode definir os nomes dos índices dos itens e os nomes dos dados dos itens. Isto é útil ao incorporar uma lista em outra lista. Por exemplo, você pode definir o índice de uma lista como i e o aninhado interno j para evitar conflito de nomenclatura.
Por padrão, o índice do item é denominado i, referindo-se ao índice dos dados da lista e começando do zero. Além de usar i como números, você também pode usar i para acessar dinamicamente os dados dos resultados da consulta.
Por exemplo, para acessar o campo nome_do_livro da tabela ficcao no componente Texto, escreva o seguinte código.
Em seguida, você poderá ver os nomes dos livros de ficção exibidos no Exibição em lista por ordem de índice.
Por padrão, você pode referenciar o valor de cada item em uma lista usando a variável currentItem. Por exemplo, para exibir um número de série mais o nome do livro, escreva o seguinte código no valor texto1.
Erros de dependência circular ocorrem quando você faz referência aos dados de uma linha por listView.items[i] de um componente dentro de um componente Exibição em lista. Recomenda-se usar tal referência somente fora da lista.
Alterne "Mostrar pulo rápido" ou defina seu valor como true para permitir que seus usuários acessem rapidamente a página especificada.
Você pode configurar se deseja permitir que seus usuários personalizem quantos itens serão exibidos em uma única página ativando ou desativando o "Mostrar botão de alteração de tamanho" ou definindo seu valor em JS. Quando desativado, você pode definir o tamanho de página padrão.
Se ativado, você poderá configurar vários tamanhos de página para serem selecionados pelos usuários.
Por padrão, a contagem total de linhas de um componente Exibição em lista é o número de itens de dados atuais. Você também pode inserir um valor de uma consulta. Por exemplo, {{consulta1.data[0].countador}}.
Exibição em lista oferece suporte à exposição de dados de componentes internos com o campo Itens. Você pode inspecionar o Navegador de dados no painel esquerdo.
Por exemplo, arraste um componente Entrada de Texto para Exibição em lista e, em seguida, você poderá referenciar o valor do componente Avaliação em componentes fora do Exibição em lista pelo código a seguir.
