Die Inhaltsliste kann das Abschnittslayout mit zusätzlichen Komponenten aufrufen.
Beim Rendering einer Inhaltsliste können Sie ein Abschnittslayout auswählen, um alle zurückgegebenen Inhaltselemente zu rendern. So können Sie unterschiedliche Layouts für die Inhaltselemente erstellen, wie eine Tabelle, einen Schieberegler oder ein Layout mit acht Spalten. Diese benutzerdefinierten Abschnittslayouts können auch bei den erweiterten Paginierungsfeatures genutzt werden.
Inhaltslisten unterstützen die folgende Paginierung:
Beim Standardpaginierungsfeature muss das Abschnittslayout keine Aktion ausführen. Es wird mit den nächsten Elementen erneut geladen, wenn Benutzer auf die nächste Seite klicken. Bei den Optionen Beim Scrollen laden und Beim Klicken laden werden allerdings weitere Komponenten zum Abschnittslayout hinzugefügt, anstatt dass dieses erneut gerendert wird. Das wird meist für das Modell mit endlosem Scrollen verwendet. Dabei werden die ersten n Elemente geladen und anschließend die nächsten Elemente abgerufen und gerendert, während der Benutzer auf der Seite nach unten scrollt. Um Beim Scrollen laden und Beim Klicken laden zu unterstützen, muss das benutzerdefinierte Abschnittslayout folgende Aktionen ausführen:
render.js: Die addComponent()-API implementieren. Diese wird mit jeder neuen Komponente aufgerufen, die dem Abschnittslayout hinzugefügt werden soll.
// dynamic API for adding additional components through "load more" when used in a Content List
addComponent: function (parentObj, component) {
// create the component div and add it to the parent object
$(parentObj).append(this.createComponentDiv(component));
}appInfo.json: Folgendes aufnehmen, um der Inhaltsliste mitzuteilen, dass das Abschnittslayout die addComponent()-API unterstützt.
"contentListData": {
"addComponent": true
},Wenn Benutzer nach der Aktualisierung von appInfo.json dieses Abschnittslayout im Einstellungsbereich auswählen und zum Paginierungsbildschirm wechseln, werden die Optionen Beim Klicken laden und Beim Scrollen laden angezeigt.