Lista infinita dinámica en Vanilla JavaScript-Infilist

Vista prévia

Descripción

La biblioteca JavaScript de Infilist le ayuda a generar dinámicamente una vista de lista (desplazador vertical) con desplazamiento infinito y soporte de devolución de llamada asincrónica.

Funcionamiento

Descargue e inserte el JavaScript principal en el documento.

<script src="build/scroll.min.js"></script>

Inicializar la biblioteca con los siguientes parámetros requeridos:

• generador: Devolución de llamada utilizada para generar la lista
• TRESHOLD: Cantidad de píxeles por debajo y por encima del borde principal que se consideran "a la vista". Calculado como CHILD_SIZE * TRESHOLD.
• CHILD_SIZE: Altura fija de un único elemento de lista.

myList = new InfiScroll(containerEl, {

generator: function(index, resolve) {


// Generate the HTMLElement in any way you want to here and then


// resolve the Promise with it.


const element = XXX;


resolve(element);

},

childSize: 100,

treshold: 7,

 }
});

Configuración opcional con valores predeterminados.

myList = new InfiScroll(containerEl, {


// Size of the list.

SIZE: "size",


 // Generator function.

QUERY: "generator",


 // Boolean indicating if the list should initially display full height.

FIXED_SIZE: "fixedSize",


// Size of the cache.

 CACHE_SIZE: "cacheSize",


 // Function which will check if view should be updated

INVALIDATE_CHECK: "check",


 // Callback for DOM deletion

DOM_DELETE: "domDelete",


 // Callback to show or hide spinner animation.

TOGGLE_SPINNER: "spinner",


 // Callback to show or hide spinner animation.

THROTTLE_SCROLL: "throttleScroll",


 // Do not reset scroll height when reloading.

KEEP_POSITION_ON_RELOAD: "keepPositionOnReload",


 // Do not reset scroll height when reloading.

BATCH_LOAD: "batchLoad"


 });

API methods.

// Invalidate the list explicitly.
myList.invalidate();

// Update the size of the list, also causes entire list to be invalidated.
myList.updateSize(newSize: number);

// Remove all children from list and reload.
myList.reload();

// Update a single item in the list
myList.updateItem(index, ...data);

// Unload event listeners
myList.dispose();

Registro de cambios

03/07/2019

• corregir el bloqueo si los elementos que se eliminarán no existen después de recargar

02/20/2019

• Fix error JS mientras que la eliminación de elementos fantasma