Framework7 - Lista Virtual

Descrição

A lista virtual é um tipo de exibição de lista, que inclui um grande número de elementos de dados sem diminuir seu desempenho. Você pode criar um layout HTML de lista virtual usando a classe de lista virtual junto com a classe de bloco de lista .

Inicializar lista virtual

Você pode inicializar a lista virtual usando o seguinte método -

myApp.virtualList(listBlockContainer, parameters)

O método contém os seguintes parâmetros -

listBlockContainer - É um HTML obrigatório ou elemento de string para o contêiner do bloco de lista.
parameters - É um objeto obrigatório, que inclui parâmetros de lista virtual.

Parâmetros de lista virtual

A tabela a seguir fornece uma lista de parâmetros virtuais -

S.Não	Parâmetro e Descrição	Tipo	Padrão
1	items Fornece uma lista de itens da matriz.	matriz	-
2	rowsBefore Ele define o número de linhas a serem exibidas antes de rolar a posição da tela.	número	-
3	rowsAfter Ele define o número de linhas a serem exibidas após rolar a posição da tela.	número	-
4	cols Ele especifica o número de itens por linha.	número	1
5	height Este parâmetro retorna a altura do item em px.	número ou função (item)	44
6	template Ele representa o único item.	string ou função	-
7	renderItem Ele usa uma função personalizada para exibir o HTML do item.	função (índice, item)	-
8	dynamicHeightBufferSize Ele especifica o tamanho do buffer na lista virtual junto com a altura dinâmica.	número	1
9	cache Você pode ativar ou desativar o cache DOM para a lista de itens.	boleano	verdadeiro
10	updatableScroll Ele atualiza o dispositivo e manipula os eventos de rolagem quando você rola a página.	boleano	-
11	showFilteredItemsOnly Ele exibe os itens filtrados usando o método filter ().	boleano	falso
12	searchByItem Ele é usado para pesquisar o item usando a barra de pesquisa e usa a consulta de pesquisa, o índice do item e o próprio item como parâmetros.	função (consulta, índice, item)	-
13	searchAll Ele é usado para pesquisar todos os itens usando a barra de pesquisa e usa a consulta de pesquisa e a matriz de itens como parâmetros.	função (consulta, itens)	-
14	onItemBeforeInsert Ele executa a função de retorno de chamada antes de inserir o item no fragmento do documento virtual.	função (lista, item)
15	onBeforeClear Ele executa a função de retorno de chamada antes de remover a lista DOM e substituída por um novo fragmento de documento.	função (lista, item)
16	onItemsBeforeInsert Ele executa a função de retorno de chamada após remover a lista DOM e antes de inserir um novo fragmento de documento.	função (lista, item)
17	onItemsAfterInsert Ele executa a função de retorno de chamada após inserir os itens com o novo fragmento do documento.	função (lista, item)

Propriedades da lista virtual

S.Não	Descrição da Propriedade
1	myList.items Ele exibe a matriz com itens.
2	myList.filteredItems Ele exibe a matriz com itens filtrados.
3	myList.domCache Ele representa os itens com cache DOM.
4	myList.params Ele exibe os parâmetros que são passados na inicialização.
5	myList.listBlock Ele especifica o contêiner do bloco de lista da instância DOM7.
6	myList.pageContent Ele especifica o contêiner de conteúdo da página da instância DOM7.
7	myList.currentFromIndex Ele exibe o primeiro item renderizado.
8	myList.currentToIndex Ele exibe o último item renderizado.
9	myList.reachEnd Ele exibe o último item de todos os itens especificados se for verdadeiro.

Métodos de lista virtual

S.Não	Método e Descrição
1	myList.filterItems(indexes); Você pode filtrar os itens usando array com índices.
2	myList.resetFilter(); Exibe todos os itens evitando o filtro.
3	myList.appendItem(item); Ele anexa os itens a uma lista virtual.
4	myList.appendItems(items); Ele anexa a matriz de itens a uma lista virtual.
5	myList.prependItem(item); Ele adiciona os itens a uma lista virtual.
6	myList.prependItems(items); Ele adiciona a matriz de itens a uma lista virtual.
7	myList.replaceItem(index, items); Ele substitui o item por um novo item no índice especificado.
8	myList.replaceAllItems(items); Ele substitui todos os itens pelos novos itens.
9	myList.moveItem(oldIndex, newIndex); Ele transfere itens do índice antigo para o novo.
10	myList.insertItemBefore(index, item); Você pode inserir o item antes do índice especificado.
11	myList.deleteItem(index); Você pode excluir o item no índice especificado.
12	myList.deleteItems(indexes); Você pode excluir os itens na matriz especificada de índices.
13	myList.deleteAllItems(); Ele exclui todos os itens.
14	myList.clearCache(); É usado para limpar o cache de elementos DOM.
15	myList.destroy(); Ele destrói a lista virtual e seus eventos.
16	myList.update(); Ele atualiza a lista virtual e renderiza novamente a lista virtual.
17	myList.scrollToItem(index); Você pode rolar a lista virtual para o item usando o número do índice.

Templating

Às vezes, você precisa filtrar ou carregar os itens de dados JSON usando alguma lógica. Para fazer isso, você pode passar array com objetos de dados usando o parâmetro items e o parâmetro template ou usando o parâmetro renderItem .

Você pode usar o parâmetro do modelo Framework7 da seguinte maneira -

var myVal = myApp.virtualList('.list-block.virtual-list', {
   //List of array items
   items: [
      {
         name: 'Element 1',
         image: '/path/image1.jpg'
      },
      {
         name: 'Element 2',
         image: '/path/image2.jpg'
      },
      // ...
      {
         name: 'Element 50',
         image: '/path/image50.jpg'
      },
   ],
   
   // Display the each item using Template7 template parameter
   template: 
      '<li class = "item-content">' +
         '<div class = "item-media"><img src = "{{image}}"></div>' +
         '<div class = "item-inner">' +
            '<div class = "item-title">{{name}}</div>' +
         '</div>' +
      '</li>'
});

Você também pode usar a função de renderização personalizada, conforme mostrado abaixo -

var myVal = myApp.virtualList('.list-block.virtual-list', {
   //List of array items
   items: [
      {
         name: 'Element 1',
         image: '/path/image1.jpg'
      },
      {
         name: 'Element 2',
         image: '/path/image2.jpg'
      },
      // ...
      {
         name: 'Element 50',
         image: '/path/image50.jpg'
      },
   ],
   
   // Display the each item using custom render function
   renderItem: 
      '<li class = "item-content">' +
         '<div class = "item-media"><img src = "{{image}}"></div>' +
         '<div class = "item-inner">' +
            '<div class = "item-title">{{name}}</div>' +
         '</div>' +
      '</li>'
});

Usando com barra de pesquisa

Você pode usar searchAll ou searchByItem parâmetros, a fim de usar a barra de pesquisa com lista virtual que fornecer a função de pesquisa em parâmetros.

var myVal = myApp.virtualList('.list-block.virtual-list', {
   //List of array items
   items: [
      {
         name: 'Element 1',
         image: '/path/image1.jpg'
      },
      {
         name: 'Element 2',
         image: '/path/image2.jpg'
      },
      // ...
      {
         name: 'Element 50',
         image: '/path/image50.jpg'
      },
   ],
   
   //Here you can searches all items in array and send back array with matched items
   searchAll: function (query, items) {
      var myItems = [];
      
         for (var i = 0; i < items.length; i++) {
            // Here check if name contains query string
            if (items[i].name.indexOf(query.trim()) >= 0) myItems.push(i);
         }
         
         // Returns array with indexes of matched items
         return myItems;
   }
});

Usando o parâmetro searchByItem -

var myVal = myApp.virtualList('.list-block.virtual-list', {
   //List of array items
   items: [
      {
         name: 'Element 1',
         image: '/path/image1.jpg'
      },
      {
         name: 'Element 2',
         image: '/path/image2.jpg'
      },
      // ...
      {
         name: 'Element 50',
         image: '/path/image50.jpg'
      },
   ],
   
   //Here you can searches all items in array and send back array with matched items
   searchByItem: function (query, index, items) {
      // Here check if name contains query string
         if (items[i].name.indexOf(query.trim()) >= 0){
            return true;
         }  else {
            return false;
         }
      }
   }
});

Altura Dinâmica

Você pode usar a altura dinâmica para os itens usando o parâmetro de altura em vez de um número.

var myVal = myApp.virtualList('.list-block.virtual-list', {
   //List of array items
   items: [
      {
         name: 'Element 1',
         image: '/path/image1.jpg'
      },
      {
         name: 'Element 2',
         image: '/path/image2.jpg'
      },
      // ...
      {
         name: 'Element 50',
         image: '/path/image50.jpg'
      },
   ],
   
   //template parameter
   template: '...',

   //using height function
   height: function (item) {
      if (item.image) return 120; //display the image with 100px height
      else return 50; //display the image with 50px height
   }
});

Métodos API

Você pode usar os métodos de API para adicionar, remover, substituir ou mover itens de lista virtual.

//Here you can initialize the list
var myVal = myApp.virtualList('.list-block.virtual-list', {
   //List of array items
   items: [
      {
         name: 'Element 1',
         image: '/path/image1.jpg'
      },
      {
         name: 'Element 2',
         image: '/path/image2.jpg'
      },
      // ...
      {
         name: 'Element 50',
			image: '/path/image50.jpg'
      },
   ],
   //template parameter
   template: '...',
});

//Here append your item
myVal.appendItem({
    image: 'Element 55'
});

// You can append multiple items when clicking on button
$('.button.append-items').on('click', function () {
   //You can append multiple items by passing array with items
   myVal.appendItem ([
      {
         image: 'Element 60'
      },
      {
         image: 'Element 61'
      },
      {
         image: 'Element 62'
      }
   ]);
});

//replace the first item
myList.replaceItem(0, {
   name: 'Element 4'
});

//you can display first 10 items when clicking on button
$('.button.show-first-10').on('click', function () {
   //Passing array with indexes to show items
   myList.filter([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]);
});

//Reset the filter
$('.button.reset-filter').on('click', function () {
   myList.resetFilter();
});

//You can insert the item before 4th and 5th item
myList.insertItemBefore(1, {
   name: 'Element 4.5'
});

↰ Previous page