Creación de un diseño de sección compatible con la carga lenta

La lista de contenido puede llamar al diseño de sección con componentes adicionales a medida que se consultan.

Al representar una lista de contenido, tiene la opción de seleccionar un diseño de sección para representar todos los elementos de contenido que se devuelven. Esto le permite crear varios diseños diferentes para los elementos de contenido, como una tabla, un control deslizante o un diseño de ocho columnas. Estos diseños de sección personalizados también pueden formar parte de funciones de paginación más avanzadas.

Las listas de contenido admiten la siguiente paginación:

  • Paginación
  • Cargar al desplazarse
  • Cargar al hacer clic

Para la función de paginación estándar, no es necesario que el diseño de sección haga nada. Se volverá a representar con el siguiente juego de elementos cuando el usuario haga clic en la siguiente página. Sin embargo, para Cargar al desplazarse y Cargar al hacer clic, en lugar de hacer que se vuelva a representar el diseño de sección, se le agregan componentes adicionales. Esto se utiliza principalmente para el modelo de desplazamiento infinito, en el que debe cargar los primeros elementos n y, a medida que el usuario se desplaza hacia abajo en la página, recupera y representa el siguiente juego de elementos. Para admitir Cargar al desplazarse y Cargar al hacer clic, el diseño de sección personalizado debe realizar

  1. render.js: implanta la API addComponent(). Se realizará una llamada a esta con cada nuevo componente que se va a agregar al diseño de sección.

    // 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)); 
               }
  2. appInfo.json: incluya lo siguiente para indicar a la lista de contenido que el diseño de sección admite la addComponent() api.

    "contentListData": {  
      "addComponent": true
    },

Una vez actualizado appInfo.json, cuando el usuario seleccione este diseño de sección en el panel de configuración y vaya a la pantalla de paginación, podrá ver las opciones Cargar al hacer clic y Cargar al desplazarse.