问题

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

问题

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

替代项

改为使用setSelectedSection，如文档主题Object Page Scrolling所述。 ObjectPageLayout将滚动到该部分，但当前没有任何滚动动画（iDuration = 0）。 “ selectedSection”是一个关联，因此，也可以在视图定义中进行设置：
```
<uxap:ObjectPageLayout selectedSection="mySection">
  <uxap:ObjectPageSection id="mySection">
```

继续使用scrollToSection，但要利用 _^⚠️私人事件"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);
},

如果DOM 尚未尚未完全准备就绪，API getScrollingSectionId()将返回一个伪造的值（当前为""）。

scrollToSection方法不滚动

1 个答案:

问题

替代项