Framework7 - Liste virtuelle

La description

La liste virtuelle est un type d'affichage de liste, qui comprend un grand nombre d'éléments de données sans diminuer leurs performances. Vous pouvez créer une mise en page HTML de la liste virtuelle à l'aide de la classe virtual-list avec la classe list-block .

Initialiser la liste virtuelle

Vous pouvez initialiser la liste virtuelle en utilisant la méthode suivante -

myApp.virtualList(listBlockContainer, parameters)

La méthode contient les paramètres suivants -

listBlockContainer - Il s'agit d'un élément HTML ou de chaîne requis pour le conteneur de bloc de liste.
parameters - C'est un objet obligatoire, qui inclut des paramètres de liste virtuelle.

Paramètres de liste virtuelle

Le tableau suivant fournit une liste de paramètres virtuels -

S. Non	Paramètre et description	Type	Défaut
1	items Fournit une liste d'éléments de tableau.	tableau	-
2	rowsBefore Il définit le nombre de lignes à afficher avant de faire défiler la position de l'écran.	nombre	-
3	rowsAfter Il définit le nombre de lignes à afficher après le défilement de la position de l'écran.	nombre	-
4	cols Il spécifie le nombre d'éléments par ligne.	nombre	1
5	height Ce paramètre renvoie la hauteur de l'élément en px.	numéro ou fonction (élément)	44
6	template Il représente l'élément unique.	chaîne ou fonction	-
sept	renderItem Il utilise une fonction personnalisée pour afficher l'élément HTML.	fonction (index, élément)	-
8	dynamicHeightBufferSize Il spécifie la taille de la mémoire tampon sur la liste virtuelle avec la hauteur dynamique.	nombre	1
9	cache Vous pouvez activer ou désactiver le cache DOM pour la liste des éléments.	booléen	vrai
dix	updatableScroll Il met à jour l'appareil et manipule les événements de défilement lorsque vous faites défiler la page.	booléen	-
11	showFilteredItemsOnly Il affiche les éléments filtrés en utilisant la méthode filter ().	booléen	faux
12	searchByItem Il est utilisé pour rechercher l'élément à l'aide de la barre de recherche et utilise la requête de recherche, l'index de l'élément et l'élément lui-même comme paramètres.	fonction (requête, index, élément)	-
13	searchAll Il est utilisé pour rechercher tous les éléments à l'aide de la barre de recherche et utilise une requête de recherche et un tableau d'éléments comme paramètres.	fonction (requête, éléments)	-
14	onItemBeforeInsert Il exécute la fonction de rappel avant d'insérer l'élément dans un fragment de document virtuel.	fonction (liste, élément)
15	onBeforeClear Il exécute la fonction de rappel avant de supprimer la liste DOM et remplacée par un nouveau fragment de document.	fonction (liste, élément)
16	onItemsBeforeInsert Il exécute la fonction de rappel après avoir supprimé la liste DOM et avant d'insérer un nouveau fragment de document.	fonction (liste, élément)
17	onItemsAfterInsert Il exécute la fonction de rappel après avoir inséré les éléments avec un nouveau fragment de document.	fonction (liste, élément)

Propriétés de la liste virtuelle

S. Non	Propriété et description
1	myList.items Il affiche le tableau avec les éléments.
2	myList.filteredItems Il affiche le tableau avec les éléments filtrés.
3	myList.domCache Il représente les éléments avec le cache DOM.
4	myList.params Il affiche les paramètres transmis lors de l'initialisation.
5	myList.listBlock Il spécifie le conteneur de bloc de liste de l'instance DOM7.
6	myList.pageContent Il spécifie le conteneur de contenu de page de l'instance DOM7.
sept	myList.currentFromIndex Il affiche le premier élément rendu.
8	myList.currentToIndex Il affiche le dernier élément rendu.
9	myList.reachEnd Il affiche le dernier élément de tous les éléments spécifiés s'il est vrai.

Méthodes de liste virtuelle

S. Non	Méthode et description
1	myList.filterItems(indexes); Vous pouvez filtrer les éléments en utilisant un tableau avec des index.
2	myList.resetFilter(); Affiche tous les éléments en empêchant le filtre.
3	myList.appendItem(item); Il ajoute les éléments à une liste virtuelle.
4	myList.appendItems(items); Il ajoute le tableau d'éléments à une liste virtuelle.
5	myList.prependItem(item); Il ajoute les éléments à une liste virtuelle.
6	myList.prependItems(items); Il ajoute le tableau d'éléments à une liste virtuelle.
sept	myList.replaceItem(index, items); Il remplace l'élément par un nouvel élément à l'index spécifié.
8	myList.replaceAllItems(items); Il remplace tous les éléments par les nouveaux éléments.
9	myList.moveItem(oldIndex, newIndex); Il transfère les éléments de l'ancien au nouvel index.
dix	myList.insertItemBefore(index, item); Vous pouvez insérer l'élément avant l'index spécifié.
11	myList.deleteItem(index); Vous pouvez supprimer l'élément à l'index spécifié.
12	myList.deleteItems(indexes); Vous pouvez supprimer les éléments du tableau d'index spécifié.
13	myList.deleteAllItems(); Il supprime tous les éléments.
14	myList.clearCache(); Il est utilisé pour vider le cache des éléments DOM.
15	myList.destroy(); Il détruit la liste virtuelle et ses événements.
16	myList.update(); Il met à jour la liste virtuelle et restitue la liste virtuelle.
17	myList.scrollToItem(index); Vous pouvez faire défiler la liste virtuelle jusqu'à l'élément en utilisant le numéro d'index.

Création de modèles

Parfois, vous devez filtrer ou charger les éléments à partir de données JSON à l'aide d'une logique. Pour ce faire, vous pouvez transmettre un tableau avec des objets de données à l'aide du paramètre items et du paramètre template ou à l'aide du paramètre renderItem .

Vous pouvez utiliser le paramètre de modèle Framework7 comme suit -

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

Vous pouvez également utiliser la fonction de rendu personnalisée comme indiqué ci-dessous -

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

Utilisation avec la barre de recherche

Vous pouvez utiliser les paramètres searchAll ou searchByItem afin d'utiliser la barre de recherche avec une liste virtuelle qui fournit la fonction de recherche dans les paramètres.

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

Utilisation du paramètre 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;
         }
      }
   }
});

Hauteur dynamique

Vous pouvez utiliser la hauteur dynamique pour les éléments en utilisant le paramètre de hauteur au lieu d'un nombre.

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éthodes API

Vous pouvez utiliser les méthodes API pour ajouter, supprimer, remplacer ou déplacer des éléments de liste virtuelle.

//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

Framework7 - Liste virtuelle

La description

Initialiser la liste virtuelle

Paramètres de liste virtuelle

Propriétés de la liste virtuelle

Méthodes de liste virtuelle

Création de modèles

Utilisation avec la barre de recherche

Hauteur dynamique

Méthodes API

Composants Framework7

Framework7 Clics rapides

Style Framework7

Modèles Framework7

Tutoriel Framework7

Framework7 Ressources utiles