主页上具有不同 app-header 的 Polymer Page

Question

我正在尝试在 polymer 2.0 中区分主页和其他页面

主页=大header和压缩
其他页面 = 与往常一样 app-header，顶部有小 header

我尝试做的是使用 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>

你猜怎么着？它起作用了，但是在它之后有一些 space，但是刷新后 space 消失了嗯..

首页压缩了大图header

点击第2页后

刷新后

有什么想法吗？

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);
}

header 和工具栏现在

<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的class调用的函数是

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

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

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

-----原解-----

在 app-header-layout 上调用 notifyResize()。

如果你查看 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();
  }
}

主页上具有不同 app-header 的 Polymer Page

Polymer Page with different app-header on home page

polymer-starter-kit

polymer-2.x

首页压缩了大图header

点击第2页后

刷新后