scrollToSection 方法不滚动

Question

我有一个 ObjectPageLayout 分为两部分，它看起来像：

<Page id="floatingFooterPage" enableScrolling="false" showNavButton="true" navButtonPress="onNavButtonPress">
    <content>
        <uxap:ObjectPageLayout id="ClassDetail" showHeaderContent="true">
            <uxap:headerTitle>
                <uxap:ObjectPageHeader></uxap:ObjectPageHeader>
            </uxap:headerTitle>
            <uxap:headerContent>
                <f:SimpleForm editable="false" layout="ResponsiveGridLayout" singleContainerFullSize="false">
                    <f:content>
                        <Label text="{i18n>charsClass}"/>
                        <Text text="{ClassInfo>/classNum} {ClassInfo>/classNumDescr}"/>
                        <Label text="{i18n>charsClassType}"/>
                        <Text text="{ClassInfo>/classType} {ClassInfo>/classTypeText}"/>
                    </f:content>
                </f:SimpleForm>
            </uxap:headerContent>
            <uxap:sections>
                <uxap:ObjectPageSection title="{i18n>charsCharsSel}" id="SecChars">
                    <uxap:subSections>
                        <uxap:ObjectPageSubSection >
                            <uxap:blocks>
                                <mvc:XMLView width="100%" viewName="ch.mindustrie.ZMM_OBJECTS_CLASSES.view.CharacSelection" id="CharacSelection"/>
                            </uxap:blocks>
                        </uxap:ObjectPageSubSection>
                    </uxap:subSections>
                </uxap:ObjectPageSection>
                <uxap:ObjectPageSection title="{i18n>charsObject}" id="SecObject">
                    <uxap:subSections>
                        <uxap:ObjectPageSubSection >
                            <uxap:blocks>
                                <mvc:XMLView width="100%" viewName="ch.mindustrie.ZMM_OBJECTS_CLASSES.view.ObjectTable" id="ObjectTable"/>
                            </uxap:blocks>
                        </uxap:ObjectPageSubSection>
                    </uxap:subSections>
                </uxap:ObjectPageSection>
                <!--    <uxap:ObjectPageSection title="Sub classes" id="SecSub" visible="false">
                    <uxap:subSections>
                        <uxap:ObjectPageSubSection >
                            <uxap:blocks>
                                <mvc:XMLView width="100%" viewName="ch.mindustrie.ZMM_OBJECTS_CLASSES.view.ClassTree" id="SubTree"/>
                            </uxap:blocks>
                        </uxap:ObjectPageSubSection>
                    </uxap:subSections>
                </uxap:ObjectPageSection>-->
            </uxap:sections>
        </uxap:ObjectPageLayout>
    </content>
    <footer>
        <Toolbar>
            <ToolbarSpacer/>
            <Button id="FindObject" text="{i18n>charsObject}" press="onPress" type="Transparent"/>
        </Toolbar>
    </footer>
</Page>

我想以编程方式滚动到第 SecChars 部分，我做了如下操作：

_scrollToObjectSection: function () {
    const oObjPage = this.byId("ClassDetail");
    oObjPage.scrollToSection("SecObject", 0, 0);
}

但它根本不起作用。我做错了什么？

Answer 1

问题

APIscrollToSection等待一个全局ID（仅后缀"SecObject"是不够的）。所以应该是：
```
oObjPage.scrollToSection(this.byId("SecObject").getId());
```
然而API只有在ObjectPageLayout的DOM完全准备好后才能成功执行。我添加了 "fully"，因为在 onAfterRendering 事件委托中调用 scrollToSection 也不会执行任何操作。必须有大约 450 毫秒的额外超时。尽管实际需要多少毫秒，但没有任何记录，而且这种情况下也没有 public 事件。

备选方案

使用setSelectedSection instead, as mentioned in the documentation topic Object Page Scrolling。 ObjectPageLayout 将滚动到该部分，但目前没有任何滚动动画 (iDuration = 0)。 "selectedSection"是一个关联，因此，它也可以在视图定义中设置：
```
<uxap:ObjectPageLayout selectedSection="mySection">
  <uxap:ObjectPageSection id="mySection">
```

继续使用 scrollToSection 但利用 _^⚠️ private 事件 "onAfterRenderingDOMReady"(src) 当 DOM 完全准备好时触发：

onInit: function() {
  // ...
  this.scrollTo(this.byId("mySection"), this.byId("myObjectPageLayout"));
},

scrollTo: function(section, opl) {
  const id = section.getId();
  const ready = !!opl.getScrollingSectionId(); // DOM of opl is fully ready
  const fn = () => opl.scrollToSection(id);
  return ready ? fn() : opl.attachEventOnce("onAfterRenderingDOMReady", fn);
},

API getScrollingSectionId() returns 如果 DOM 是 而不是 则为假值（当前 ""） ] 完全准备好了

scrollToSection 方法不滚动

The scrollToSection method does not scroll

sapui5

问题

备选方案