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.
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.
Vinculando dados
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,urlecover.
Você pode visualizar os dados detalhados sobre o componente Exibição em lista, seus itens, propriedades, etc., no navegador de dados.
Exibir dados em componentes internos
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.
Nomeando os itens
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.
Nome do índice do item
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.
Nome dos dados do item
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.
Paginação
Pulo rápido
Alterne "Mostrar pulo rápido" ou defina seu valor como true para permitir que seus usuários acessem rapidamente a página especificada.
Tamanho da página
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.
Contagem total de linhas
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}}.
Referenciar itens fora da lista
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.
Last updated
