创建支持延迟加载的部分布局

内容列表可以调用部分布局以及其他组件(如果查询这些组件)。

呈现内容列表时,您可以选择部分布局来呈现返回的所有内容项。这样,您可以为内容项创建各种不同的布局,例如表、滑块或八列布局。这些定制部分布局还可以参与更高级的分页功能。

内容列表支持以下分页:

  • 分页
  • 滚动时加载
  • 单击时加载

对于标准分页功能,部分布局不需要执行任何操作。用户单击下一页时,将用下一组项重新呈现该布局。但是,对于滚动时加载单击时加载,将不重新呈现部分布局,而是将其他组件添加到部分布局。这主要用于无限滚动模型,其中您加载前 n 项,然后随着用户向下滚动页,您将提取并呈现下一组项。为了支持滚动时加载单击时加载,定制部分布局需要进行以下相关操作

  1. render.js:实施 addComponent() API。将对添加到部分布局的每个新组件调用此项。

    // 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:包括以下内容,以使内容列表知道部分布局支持 addComponent() api

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

更新 appInfo.json 后,当用户在设置面板中选择此部分布局并转至分页屏幕时,他们将看到单击时加载滚动时加载选项。