Question

我对页面设计有疑问。我无法在所有分辨率下使页眉和页脚正确显示。我有一个主要的App视图，它处理路由并将所需的视图放到内容中。

<mvc:View xmlns:mvc="sap.ui.core.mvc"   xmlns="sap.m" heigh="100%" displayBlock="true"
      controllerName="demo_pcm.App" >

<Page id="productListPage" navButtonPress="onNavBack" showNavButton="true" title="{i18n>products}">
    <headerContent>
<IconTabBar
        expanded="false"
        id="idIconTabBar"
        select="handleIconTabBarSelect"
        expandable="false"
        applyContentPadding="false"
        headerMode="Inline"
        visible="{viewModel>/visible}"
       >
    <items>
        <IconTabFilter

                icon="sap-icon://begin"
                iconColor="Neutral"
                design="Horizontal"
                text="STEP1"
                key="STEP1" />
        <IconTabSeparator icon="sap-icon://open-command-field" />
        <IconTabFilter
                icon="sap-icon://survey"
                iconColor="Neutral"
                design="Horizontal"
                text="STEP2"
                key="STEP2"
        />


    </items>
</IconTabBar></headerContent>

    <content >
<App id="app" >
    <!-- pages will be filled automatically via routing -->
</App>
    </content>
</Page>

根据URL，我将其他视图插入到应用程序本身。在这里我的设计问题来了。如果我使用标题内容并将icontabbar放在那里（这个icontabbar应该在每个子视图上重复，这就是我放在app.view中的原因）在这里看起来如何; header cannot be seen clearly

如果我只是删除页面控件或不在app.view中使用，只需将icontab栏本身放在上方即可控制，它可以正常工作。我希望我的icontabbar始终坚持标题，这就是我试图包含在标题内容中的原因。另一个问题是页脚。从路由器加载我的第一个第一个视图后，如果我不向下滚动，我看不到我的页脚。我需要向下滚动才能查看或设置视图高度为90％。这就是它的样子; missing footer

在图像中你会看到右边的另一个滚动条，这是由于页面振动（不知何故，它在chrome中抖动，我把代码放在css下面）

html{ overflow-y: scroll;}

来自app.view，如果我插入滚动容器并将高度设置为90％，它工作正常，但它在更高的分辨率上更高的位置。（所以在4k分辨率，它看起来很奇怪）

  <ScrollContainer
        height="90%"
        width="100%"
        horizontal="false"
        vertical="true">
<App id="app" >
    <!-- pages will be filled automatically via routing -->
</App>
</ScrollContainer>

以及它现在的样子（没有app.view和滚动容器，高度为90％（可以看到页脚，但你可以看到底部的白线，它在更高的分辨率下会变大）（stackoverflow不允许我发布3个链接：/）

这是我的index.html

 <script>
    sap.ui.localResources("demo_pcm");
    sap.ui.localResources("util");
    sap.ui.localResources("i18n");
    var oModel = "";
    sap.ui.getCore().attachInit(function() {
        sap.ui.require([
            "sap/m/Shell",
            "sap/ui/core/ComponentContainer",
            "demo_pcm/Component"
        ], function(Shell, ComponentContainer, Component) {

                app: new ComponentContainer({
                    height:"100%",
                    component: new Component({
                        id: "mvcAppComponent"
                    })
                }).placeAt("content");
        }); });



</script>

哪里可以出问题？我很想失去理智。我试过浮动页脚但同样的问题。我应该在页脚之前的子视图中包含我的滚动容器吗？

Answer 1

如果您对某些CSS解决方法持开放态度，请点击此处快速修复：工具栏似乎在不同分辨率下具有大约125px的固定高度（包括填充）。您可以使用此方法相应地设置App容器的高度。

XML

<App id="app" class="adjustedHeight">

CSS

.adjustedHeight{
    height: calc(100% - 125px) !important;
}

注意：这不是最好的解决方案。如果我找到一个更好的，我会更新这个答案

SAPUI5页脚未显示在正确的位置

1 个答案: