主页

Question

我正试图在聚合物2.0中的主页和其他页面之间做出改变

1. 主页=有大标题和浓缩
2. 其他Page =就像通常的app-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>

并猜猜是什么？它起作用了，但是在它之后有一些空间，但是刷新后空间消失了......

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



点击第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);
}

标题和工具栏现在是

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

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

我已经在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> ：

this.$.header.notifyResize()

然后在_routePageChanged(page)中致电_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(); } } ：

<div id="box1" ng-click="yourFunction()">
    </div>