的OData

Question

JS

var model = new JSONModel();
model.setData(data);
this.getView().byId("Table").setModel(model);
var table = this.getView().byId("Table");
table.bindItems({
    path: "/",
    template: new sap.m.ColumnListItem({
        cells: [
            new sap.m.Image({
                src: "{photo}"
            }),
            new sap.m.Text({
                text: "{name}"
            })
        ]
    })
});

这里我的数据很少。使用上面的代码我可以在表中列出。现在我想只列出表格中的前10个项目，其余数据仅在向下滚动后显示。向下滚动鼠标后，我需要调用一个函数来获得下一个10个数据。我们如何在sapUi5中向下滚动后调用函数;

Answer 1

的OData

为了在滚动上实现增长，您需要考虑以下因素：

ListBase（由sap.m.Table使用）需要：
- growing="true"
- growingThreshold="<number of entries to load>"
- growingScrollToLoad="true"
列表控件需要位于scrollable container内。

（growingScrollToLoad）只能在growing属性设置为true且仅当sap.m.List或sap.m.Table中有一个实例时使用可滚动滚动容器（例如sap.m.Page）。 ^source

运行此示例以查看其实际操作：

sap.ui.getCore().attachInit(() => sap.ui.require([
  "sap/ui/model/odata/v2/ODataModel",
  "sap/ui/core/mvc/XMLView",
], function(ODataModel, XMLView) {
  "use strict";

  const model = new ODataModel({
    serviceUrl: [
      "https://cors-anywhere.herokuapp.com/",
      "https://services.odata.org/V2/Northwind/Northwind.svc/",
    ].join(""),
    preliminaryContext: true,
    tokenHandling: false,
  });
  sap.ui.getCore().loadLibrary("sap.m", true).then(() => XMLView.create({
    definition: `<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" displayBlock="true">
      <App>
        <Page showHeader="false">
          <List
            growing="true"
            growingThreshold="10"
            growingScrollToLoad="true"
            busyIndicatorDelay="0"
            items="{
              path: '/Products',
              parameters: {
                select: 'ProductID, ProductName'
              },
              templateShareable: false
            }"
          >
            <StandardListItem title="{ProductName}" />
          </List>
        </Page>
      </App>
    </mvc:View>`,
    models: model,
  }).then(view => view.placeAt("content")));
}));

<script id="sap-ui-bootstrap"
  src="https://openui5nightly.hana.ondemand.com/resources/sap-ui-core.js"
  data-sap-ui-libs="sap.ui.core"
  data-sap-ui-theme="sap_fiori_3"
  data-sap-ui-async="true"
  data-sap-ui-compatVersion="edge"
  data-sap-ui-modules="sap/ui/thirdparty/datajs"
  data-sap-ui-xx-waitForTheme="true"
></script><body id="content" class="sapUiBody"></body>

如何在SAPUI5中向下滚动后调用函数？

手动挂钩

如果没有OData服务（没有$top＆amp; $skip），但当用户几乎到达列表末尾时（通过滚动或通过键盘）仍然需要通知应用程序），你可以使用sap.ui.core.delegate.ScrollEnablement。由于列表控件应该已经在scrollable container内（例如Page），因此不需要创建ScrollEnablement的新实例。相反，有一个方便的API可以检索相应的ScrollEnablement委托getScrollDelegate。获得委托对象后，调用setGrowingList等待在几乎达到底部时调用的钩子函数。

示例：

sap.ui.require([
  "sap/m/library"
], sapMLib => sapMLib.getScrollDelegate(myListControl).setGrowingList(() => {
  // Your code to load more data
}, sapMLib.ListGrowingDirection.Downwards));

注意

在呈现之前，当可滚动父控件已经created an instance of ScrollEnablement时，API getScrollDelegate仅返回引用。
API setGrowingList受保护，这意味着它不应由应用程序开发人员使用。请仅在扩展目标控件时使用API。

Answer 2

您需要将属性growing设置为true。并将属性growingThreshold设置为10。

如何做表/列表

JS

2 个答案:

的OData

手动挂钩

注意