主页上具有不同应用程序标题的聚合物页面

Question

我正在尝试在聚合物 2.0 中区分主页和其他页面

1. 主页 = 带有大标题和精简
2. 其他页面 = 与往常一样的应用标题，顶部带有小标题

我尝试做的是使用 dom-if，我用 2 种 app-header 创建 dom-if

_isHome(page) {
  return page === "view1";
}

app-header#homeHeader {
  color: #fff;
  height: 500px;
  --app-header-background-front-layer: {
    background-image: url(../images/Digital-Signage-Slider3a.jpg);
    background-size: cover;
    background-repeat: no-repeat;
  }
  ;
}

app-header#defaultHeader {
  color: #fff;
  background-color: var(--app-primary-color);
}

<app-header-layout>
  <template is="dom-if" if="[[_isHome(page)]]">
    <app-header id="homeHeader" slot="header" condenses reveals effects="parallax-background" style="height: 500px">
      <app-toolbar>
        <div main-title>My App</div>
        <paper-icon-button icon="my-icons:menu" drawer-toggle></paper-icon-button>
      </app-toolbar>
    </app-header>
  </template>

  <template is="dom-if" if="[[!_isHome(page)]]">
    <app-header id="defaultHeader" slot="header" condenses reveals effects="material">
      <app-toolbar>
        <div main-title>My App</div>
          <paper-icon-button icon="my-icons:menu" drawer-toggle></paper-icon-button>
      </app-toolbar>
    </app-header>
  </template>

  <iron-pages selected="[[page]]" attr-for-selected="name" fallback-selection="view404" role="main">
    <my-view1 name="view1"></my-view1>
    <my-view2 name="view2"></my-view2>
    <my-view3 name="view3"></my-view3>
    <my-view404 name="view404"></my-view404>
  </iron-pages>
</app-header-layout>

你猜怎么着？它起作用了，但是后面有一些空间，但是刷新后空间就消失了嗯..

带有大图像压缩标题的主页

点击第二页后

刷新后

有什么想法吗？

Answer 1

修改后的解决方案

我又尝试了一次，因为我昨天开始使用一个应用程序。我想我有一个更简单的解决方案，只有一个 app-header 和一个 app-toolbar。

首先，我将 app-header#... 样式替换为：

.main-title {
  color: #fff;
  height: 500px;
  --app-header-background-front-layer: {
    background-image: url(../images/Digital-Signage-Slider3a.jpg);
    background-size: cover;
    background-repeat: no-repeat;
  }
  ;
}

.condensed-title {
  color: #fff;
  background-color: var(--app-primary-color);
}

现在是标题和工具栏

<app-header-layout id="header" has-scrolling-region>

  <app-header class$=[[_getHeaderClass(page)]] slot="header" fixed effects="waterfall">

    <app-toolbar>
      <template is="dom-if" if=[[_isHome(page)]]>
        <div main-title>My App 1</div>
      </template>
      <template is="dom-if" if=[[!_isHome(page)]]>
        <div condensed-title>My App 2 & 3</div>
      </template>
      <paper-icon-button icon="my-icons:menu" drawer-toggle></paper-icon-button>
    </app-toolbar>

  </app-header>
  ...

设置app-header的类的函数是

_getHeaderClass(page) {
  return (page === "view1") ? 'main-title' : 'condensed-title';
}

请注意，您仍然必须在_routePageChanged(page) 中调用this.$.header.notifyResize()。

我已在my-app-revised.html 上提供了完整文件的要点。

-----以前的解决方案-----

拨打notifyResize()app-header-layout。

如果您查看polymer-starter-kit，请给app-header-layout 一个id，例如id="header"：

<app-header-layout id="header" has-scrolling-region>

然后在_routePageChanged(page)中调用this.$.header.notifyResize()：

_routePageChanged(page) {
  // If no page was found in the route data, page will be an empty stri.
  // Default to 'view1' in that case.
  this.page = page || 'view1';
  this.$.header.notifyResize();

  // Close a non-persistent drawer when the page & route are changed.
  if (!this.$.drawer.persistent) {
    this.$.drawer.close();
  }
}