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'
});