Framework7 - Lista virtual

Descripción

La lista virtual es un tipo de vista de lista, que incluye una gran cantidad de elementos de datos sin disminuir su rendimiento. Puede crear un diseño HTML de la lista virtual utilizando la clase de lista virtual junto con la clase de bloque de lista .

Inicializar lista virtual

Puede inicializar la lista virtual utilizando el siguiente método:

myApp.virtualList(listBlockContainer, parameters)

El método contiene los siguientes parámetros:

listBlockContainer - Es un elemento HTML o de cadena obligatorio para el contenedor de bloques de lista.
parameters - Es un objeto obligatorio, que incluye parámetros de lista virtual.

Parámetros de lista virtual

La siguiente tabla proporciona una lista de parámetros virtuales:

S. No	Descripción de parámetros	Tipo	Defecto
1	items Proporciona una lista de elementos de la matriz.	formación	-
2	rowsBefore Define el número de filas que se mostrarán antes de desplazarse por la posición de la pantalla.	número	-
3	rowsAfter Define el número de filas que se mostrarán después de desplazarse por la posición de la pantalla.	número	-
4	cols Especifica el número de elementos por fila.	número	1
5	height Este parámetro devuelve la altura del elemento en px.	número o función (artículo)	44
6	template Representa el artículo único.	cadena o función	-
7	renderItem Utiliza una función personalizada para mostrar el elemento HTML.	función (índice, artículo)	-
8	dynamicHeightBufferSize Especifica el tamaño del búfer en la lista virtual junto con la altura dinámica.	número	1
9	cache Puede habilitar o deshabilitar la caché DOM para la lista de elementos.	booleano	cierto
10	updatableScroll Actualiza el dispositivo y manipula los eventos de desplazamiento cuando se desplaza por la página.	booleano	-
11	showFilteredItemsOnly Muestra los elementos filtrados mediante el método filter ().	booleano	falso
12	searchByItem Se utiliza para buscar el elemento mediante la barra de búsqueda y utiliza la consulta de búsqueda, el índice del elemento y el elemento en sí como parámetros.	función (consulta, índice, elemento)	-
13	searchAll Se utiliza para buscar todos los elementos mediante la barra de búsqueda y utiliza la consulta de búsqueda y la matriz de elementos como parámetros.	función (consulta, elementos)	-
14	onItemBeforeInsert Ejecuta la función de devolución de llamada antes de insertar el elemento en el fragmento del documento virtual.	función (lista, artículo)
15	onBeforeClear Ejecuta la función de devolución de llamada antes de eliminar la lista DOM y reemplazarla con un nuevo fragmento de documento.	función (lista, artículo)
dieciséis	onItemsBeforeInsert Ejecuta la función de devolución de llamada después de eliminar la lista DOM y antes de insertar un nuevo fragmento de documento.	función (lista, artículo)
17	onItemsAfterInsert Ejecuta la función de devolución de llamada después de insertar los elementos con el nuevo fragmento de documento.	función (lista, artículo)

Propiedades de lista virtual

S. No	Descripción de propiedad
1	myList.items Muestra la matriz con elementos.
2	myList.filteredItems Muestra la matriz con elementos filtrados.
3	myList.domCache Representa los elementos con caché DOM.
4	myList.params Muestra los parámetros que se pasan en la inicialización.
5	myList.listBlock Especifica el contenedor de bloques de lista de la instancia DOM7.
6	myList.pageContent Especifica el contenedor de contenido de la página de la instancia DOM7.
7	myList.currentFromIndex Muestra el primer elemento renderizado.
8	myList.currentToIndex Muestra el último elemento renderizado.
9	myList.reachEnd Muestra el último elemento de todos los elementos especificados si es verdadero.

Métodos de lista virtual

S. No	Método y descripción
1	myList.filterItems(indexes); Puede filtrar los elementos utilizando una matriz con índices.
2	myList.resetFilter(); Muestra todos los elementos evitando el filtro.
3	myList.appendItem(item); Agrega los elementos a una lista virtual.
4	myList.appendItems(items); Agrega la matriz de elementos a una lista virtual.
5	myList.prependItem(item); Antepone los elementos a una lista virtual.
6	myList.prependItems(items); Antepone la matriz de elementos a una lista virtual.
7	myList.replaceItem(index, items); Reemplaza el elemento con un elemento nuevo en el índice especificado.
8	myList.replaceAllItems(items); Reemplaza todos los elementos con los nuevos elementos.
9	myList.moveItem(oldIndex, newIndex); Transfiere elementos del índice antiguo al nuevo.
10	myList.insertItemBefore(index, item); Puede insertar el elemento antes del índice especificado.
11	myList.deleteItem(index); Puede eliminar el elemento en el índice especificado.
12	myList.deleteItems(indexes); Puede eliminar los elementos de la matriz de índices especificada.
13	myList.deleteAllItems(); Elimina todos los elementos.
14	myList.clearCache(); Se utiliza para borrar la caché de elementos DOM.
15	myList.destroy(); Destruye la lista virtual y sus eventos.
dieciséis	myList.update(); Actualiza la lista virtual y vuelve a renderizar la lista virtual.
17	myList.scrollToItem(index); Puede desplazarse por la lista virtual al elemento utilizando el número de índice.

Plantillas

A veces es necesario filtrar o cargar los elementos de los datos JSON utilizando cierta lógica. Para hacer esto, puede pasar una matriz con objetos de datos usando el parámetro de elementos y el parámetro de plantilla o usando el parámetro renderItem .

Puede usar el parámetro de plantilla Framework7 de la siguiente manera:

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

También puede usar la función de renderizado personalizado como se muestra a continuación:

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

Usar con la barra de búsqueda

Puede utilizar SearchAll o searchByItem parámetros con el fin de utilizar la barra de búsqueda con la lista virtual que suministra la función de búsqueda de 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 el 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

Puede utilizar la altura dinámica para los elementos utilizando el parámetro de altura en lugar de un 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

Puede utilizar los métodos de la API para agregar, eliminar, reemplazar o mover elementos de la 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