如何增长表格/列表

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

Run Code Online (Sandbox Code Playgroud)

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

Answer 1

Bog*_*ann 6

开放数据

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

控制sap.m.ListBase（例如sap.m.Table）需要：
- growing="true"
- growingThreshold="<number of entries to load>"
- growingScrollToLoad="true"
列表控件需要位于可滚动容器内。

( ) 仅当该属性设置为且仅当可滚动滚动容器（例如）中有一个实例或内部存在一个实例时growingScrollToLoad才能使用。（来源）growingtruesap.m.Listsap.m.Tablesap.m.Page

运行此示例以查看其实际效果：

globalThis.onUI5Init = () => sap.ui.require([
  "sap/ui/model/odata/v4/ODataModel",
  "sap/ui/core/mvc/XMLView",
], async function (ODataModel, XMLView) {
  "use strict";

  const model = new ODataModel({
    serviceUrl: "https://services.odata.org/TripPinRESTierService/(S(5pfdhufu5ymr2jh0az0vcwqe))/",
    autoExpandSelect: true,
  });

  const control = await XMLView.create({
    definition: `<mvc:View xmlns:mvc="sap.ui.core.mvc"
      xmlns="sap.m"
      displayBlock="true"
      height="100%"
    >
      <App>
        <Page showHeader="false">
          <List
            growing="true"
            growingThreshold="5"
            growingScrollToLoad="true"
            items="{/People}"
          >
            <StandardListItem title="{FirstName}" />
          </List>
        </Page>
      </App>
    </mvc:View>`,
    models: model,
  });
  control.placeAt("content");
});

Run Code Online (Sandbox Code Playgroud)

<script id="sap-ui-bootstrap"
  src="https://sdk.openui5.org/nightly/resources/sap-ui-core.js"
  data-sap-ui-oninit="onUI5Init"
  data-sap-ui-libs="sap.ui.core,sap.m,sap.ui.unified,sap.ui.layout"
  data-sap-ui-theme="sap_horizon_dark"
  data-sap-ui-async="true"
  data-sap-ui-compatversion="edge"
  data-sap-ui-excludejquerycompat="true"
  data-sap-ui-xx-waitForTheme="init"
></script>
<body id="content" class="sapUiBody"></body>

Run Code Online (Sandbox Code Playgroud)

手动挂钩

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

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

例子：

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

Run Code Online (Sandbox Code Playgroud)

笔记

当可滚动父控件在渲染之前已创建 ScrollEnablement 实例时， APIgetScrollDelegate仅返回引用。
该 APIsetGrowingList是protected 的，这意味着它不适合由应用程序开发人员使用。请仅在扩展目标控件时使用 API。

归档时间：	8 年，2 月前
查看次数：	13000 次
最近记录：	3 年，1 月前