Ionic 5 - LargeTitle 在上面显示上面的内容答案

【问题标题】：Ionic 5 - LargeTitle on top show content aboveIonic 5 - LargeTitle 在上面显示上面的内容
【发布时间】：2020-12-11 16:15:56
【问题描述】：

我从头开始使用标准的 Ionic 5 Tabs Starter 模板和来自docs 的大标题栏，但在我的标题栏上方，我可以从下面看到模糊的内容。这是正确的行为吗？

const Tab2: React.FC = () => {
return (
<IonPage>
  <IonHeader translucent>
    <IonToolbar>
      <IonTitle>Settings</IonTitle>
    </IonToolbar>
  </IonHeader>

  <IonContent fullscreen>
    <IonHeader collapse="condense">
      <IonToolbar>
        <IonTitle size="large">Settings</IonTitle>
      </IonToolbar>
      <IonToolbar>
        <IonSearchbar></IonSearchbar>
      </IonToolbar>
    </IonHeader>
    <ExploreContainer name="Tab 3 page" />
  </IonContent>
</IonPage>
);
};

向下滚动后第二个标题是正确的：

【问题讨论】：

标签： ionic-framework ionic5

【解决方案1】：

好的，我找到了这个问题的原因。复制内容是我的错。如果我在内容部分添加普通卡片，则行为是正确的。

【讨论】：

【解决方案2】：

删除添加标题

<IonPage>
  <IonHeader translucent>
    <IonToolbar>
      <IonTitle>Settings</IonTitle>
    </IonToolbar>
  </IonHeader>

  <IonContent fullscreen>
    <IonToolbar>
      <IonSearchbar></IonSearchbar>
    </IonToolbar>
    <ExploreContainer name="Tab 3 page" />
  </IonContent>
</IonPage>

【讨论】：

如果您像第二个屏幕截图那样向下滚动，则会显示添加标题。如果页面加载，这通常应该隐藏。