sap.m.IconTabBar：如何使标题粘滞/只有内容可滚动

Question

我正在寻找一种让sap.m.IconTabBar粘性的方法，这意味着当您可以滚动内容时标签栏保持固定。据我所知，没有标准的属性支持。有人实现了吗？

PS：可以通过将CSS属性position: fixed用于组件的标题部分来实现。

Answer 1

这里我的评论再次作为回答：

在示例中，我将sap.m.IconTabBar的内容包装在sap.m.ScrollContainer中，并将vertical属性设置为true。

http://jsbin.com/luqurosaye/1/edit?html,output

Answer 2

以下是启用粘贴标头或仅使内容可滚动的两种方法。通过这些，内容也可以相对于其父大小设置为100%高度。

在ScrollContainer 中

IconTabFilter

<IconTabBar
  stretchContentHeight="true"
  applyContentPadding="false"
>
  <items>
    <IconTabFilter>
      <!-- Scrollable container, such as: -->
      <ScrollContainer
        horizontal="false"
        vertical="true"
        height="100%"
      >
        <!-- Your scrollable content -->
      </ScrollContainer>
    </IconTabFilter>
  </items>
  <content>
    <!-- Or a single ScrollContainer here for all icon tabs -->
  </content>
</IconTabBar>

• 在IconTabBar中启用stretchContentHeight，以便涵盖整个可用区域
• 使用scrollable container或[{1}}等ScrollContainer控件包裹内容。

在IconTabHeader

之外

Page

或者，一些鲜为人知但仍然有用的内容可能是ScrollContainer ^src 中使用的控件IconTabHeader。 与IconTabBar的方法相反，

• IconTabBar需要其父容器禁用其自己的滚动。
  • 对于Page，IconTabHeader。
  • 对于Dialog，enableScrollable="false"。
• 内容与verticalScrolling="false"无关。
• IconTabHeader（例如IconTabBar）的某些功能缺失。

话虽如此，这是一个expandable的例子：

IconTabHeader