Framework7 - Elenco virtuale

Descrizione

L'elenco virtuale è un tipo di visualizzazione elenco, che include un numero elevato di elementi di dati senza comprometterne le prestazioni. È possibile creare il layout HTML dell'elenco virtuale utilizzando la classe dell'elenco virtuale insieme alla classe del blocco dell'elenco .

Inizializza elenco virtuale

È possibile inizializzare l'elenco virtuale utilizzando il seguente metodo:

myApp.virtualList(listBlockContainer, parameters)

Il metodo contiene i seguenti parametri:

  • listBlockContainer - È un elemento HTML o stringa obbligatorio per il contenitore del blocco elenco.

  • parameters - È un oggetto obbligatorio, che include i parametri dell'elenco virtuale.

Parametri dell'elenco virtuale

La tabella seguente fornisce un elenco di parametri virtuali:

S.No Parametro e descrizione genere Predefinito
1

items

Fornisce un elenco di elementi dell'array.

 Vettore -
2

rowsBefore

Definisce il numero di righe da visualizzare prima di scorrere la posizione dello schermo.

 numero -
3

rowsAfter

Definisce il numero di righe da visualizzare dopo aver fatto scorrere la posizione dello schermo.

 numero -
4

cols

Specifica il numero di elementi per riga.

 numero 1
5

height

Questo parametro restituisce l'altezza dell'oggetto in px.

 numero o funzione (elemento) 44
6

template

Rappresenta il singolo articolo.

 stringa o funzione -
7

renderItem

Utilizza la funzione personalizzata per visualizzare l'elemento HTML.

 funzione (indice, elemento) -
8

dynamicHeightBufferSize

Specifica la dimensione del buffer nell'elenco virtuale insieme all'altezza dinamica.

 numero 1
9

cache

È possibile abilitare o disabilitare la cache DOM per l'elenco di elementi.

 booleano vero
10

updatableScroll

Aggiorna il dispositivo e manipola gli eventi di scorrimento quando scorri la pagina.

booleano -
11

showFilteredItemsOnly

Visualizza gli elementi filtrati utilizzando il metodo filter ().

 booleano falso
12

searchByItem

Viene utilizzato per cercare l'elemento utilizzando la barra di ricerca e utilizza la query di ricerca, l'indice dell'elemento e l'elemento stesso come parametri.

 funzione (query, indice, elemento) -
13

searchAll

Viene utilizzato per cercare tutti gli elementi utilizzando la barra di ricerca e utilizza la query di ricerca e la matrice di elementi come parametri.

 funzione (query, elementi) -
14

onItemBeforeInsert

Esegue la funzione di callback prima di inserire l'elemento nel frammento del documento virtuale.

 funzione (elenco, elemento)
15

onBeforeClear

Esegue la funzione di callback prima di rimuovere l'elenco DOM e sostituito con un nuovo frammento di documento.

 funzione (elenco, elemento)
16

onItemsBeforeInsert

Esegue la funzione di callback dopo aver rimosso l'elenco DOM e prima di inserire un nuovo frammento di documento.

 funzione (elenco, elemento)
17

onItemsAfterInsert

Esegue la funzione di callback dopo aver inserito gli elementi con un nuovo frammento di documento.

 funzione (elenco, elemento)

Proprietà elenco virtuale

S.No Proprietà e descrizione
1

myList.items

Visualizza l'array con gli elementi.
2

myList.filteredItems

Visualizza la matrice con gli elementi filtrati.
3

myList.domCache

Rappresenta gli elementi con cache DOM.
4

myList.params

Visualizza i parametri che vengono passati durante l'inizializzazione.
5

myList.listBlock

Specifica il contenitore del blocco dell'elenco dell'istanza DOM7.
6

myList.pageContent

Specifica il contenitore del contenuto della pagina dell'istanza DOM7.
7

myList.currentFromIndex

Visualizza il primo elemento renderizzato.
8

myList.currentToIndex

Visualizza l'ultimo elemento renderizzato.
9

myList.reachEnd

Visualizza l'ultimo elemento di tutti gli elementi specificati se è vero.

Metodi di elenco virtuale

S.No Metodo e descrizione
1

myList.filterItems(indexes);

È possibile filtrare gli elementi utilizzando array con indici.
2

myList.resetFilter();

Visualizza tutti gli elementi impedendo il filtro.
3

myList.appendItem(item);

Aggiunge gli elementi a un elenco virtuale.
4

myList.appendItems(items);

Aggiunge la matrice di elementi a un elenco virtuale.
5

myList.prependItem(item);

Antepone gli elementi a un elenco virtuale.
6

myList.prependItems(items);

Antepone la serie di elementi a un elenco virtuale.
7

myList.replaceItem(index, items);

Sostituisce l'elemento con un nuovo elemento all'indice specificato.
8

myList.replaceAllItems(items);

Sostituisce tutti gli articoli con i nuovi articoli.
9

myList.moveItem(oldIndex, newIndex);

Trasferisce gli elementi dal vecchio al nuovo indice.
10

myList.insertItemBefore(index, item);

È possibile inserire l'elemento prima dell'indice specificato.
11

myList.deleteItem(index);

È possibile eliminare l'elemento all'indice specificato.
12

myList.deleteItems(indexes);

È possibile eliminare gli elementi nella matrice di indici specificata.
13

myList.deleteAllItems();

Elimina tutti gli elementi.
14

myList.clearCache();

Viene utilizzato per svuotare la cache degli elementi DOM.
15

myList.destroy();

Distrugge l'elenco virtuale e i suoi eventi.
16

myList.update();

Aggiorna l'elenco virtuale e ne riproduce nuovamente l'elenco.
17

myList.scrollToItem(index);

È possibile scorrere l'elenco virtuale fino all'elemento utilizzando il numero di indice.

Modelli

A volte è necessario filtrare o caricare gli elementi dai dati JSON utilizzando una logica. Per fare ciò, puoi passare array con oggetti dati usando il parametro items e il parametro template o usando il parametro renderItem .

È possibile utilizzare il parametro del modello Framework7 come segue:

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

Puoi anche utilizzare la funzione di rendering personalizzata come mostrato di seguito:

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

Utilizzo con la barra di ricerca

È possibile utilizzare i parametri searchAll o searchByItem per utilizzare la barra di ricerca con lista virtuale che fornisce la funzione di ricerca nei parametri.

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

Utilizzo del parametro 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;
         }
      }
   }
});

Altezza dinamica

È possibile utilizzare l'altezza dinamica per gli elementi utilizzando il parametro di altezza invece di un numero.

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

Metodi API

È possibile utilizzare i metodi API per aggiungere, rimuovere, sostituire o spostare gli elementi dell'elenco virtuale.

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