Polymer 2.0首页与其他页不同app-header实现问题求助

我之前也遇到过一模一样的布局坑——用dom-if切换两个app-header时，经常会因为Polymer的渲染时机和app-layout的尺寸计算逻辑，出现刷新前的莫名空白。下面给出几种可行的解决方案，按推荐优先级排序：

1. 优先选择：动态修改单个app-header的属性（替代dom-if切换） #

与其用dom-if销毁重建两个独立的app-header，不如复用同一个组件，通过计算属性动态切换它的高度、背景图、特效等。这种方式避免了DOM元素的频繁创建销毁，布局更稳定，也从根源上消除了渲染延迟导致的空白。

代码示例： #

<app-header id="mainHeader" 
            condenses reveals 
            effects="[[_computeHeaderEffects(currentRoute)]]"
            style$="height: [[_computeHeaderHeight(currentRoute)]]; 
                    background-image: [[_computeHeaderBg(currentRoute)]];
                    background-size: cover;">
  <!-- 通用的header内容，比如工具栏、菜单按钮等 -->
  <app-toolbar>
    <paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
    <div main-title>[[_computePageTitle(currentRoute)]]</div>
  </app-toolbar>
</app-header>

对应的脚本逻辑：

class MyApp extends Polymer.Element {
  static get is() { return 'my-app'; }
  static get properties() {
    return {
      currentRoute: {
        type: String,
        value: ''
      }
    };
  }

  _computeHeaderHeight(route) {
    // 首页用大高度，其他页面用常规小高度
    return route === 'home' ? '300px' : '64px';
  }

  _computeHeaderBg(route) {
    return route === 'home' ? 'url(/assets/home-header-bg.jpg)' : 'none';
  }

  _computeHeaderEffects(route) {
    // 首页启用waterfall滚动效果，其他页面关闭
    return route === 'home' ? 'waterfall' : '';
  }

  _computePageTitle(route) {
    return route === 'home' ? '首页' : '其他页面';
  }
}

window.customElements.define(MyApp.is, MyApp);

2. 保留dom-if的情况下修复空白 #

如果因为业务逻辑必须用dom-if切换两个完全独立的app-header，可以通过监听dom-change事件，在元素渲染完成后强制触发app-header的尺寸重新计算，解决空白问题。

代码示例： #

<dom-if if="{{isHomeRoute}}">
  <template on-dom-change="_onHomeHeaderRendered">
    <app-header id="homeHeader" 
                condenses reveals effects="waterfall"
                style="height: 300px; background-image: url(/assets/home-header-bg.jpg);">
      <!-- 首页专属header内容 -->
      <app-toolbar>...</app-toolbar>
    </app-header>
  </template>
</dom-if>

<dom-if if="{{!isHomeRoute}}">
  <template on-dom-change="_onRegularHeaderRendered">
    <app-header id="regularHeader" style="height: 64px;">
      <!-- 其他页面专属header内容 -->
      <app-toolbar>...</app-toolbar>
    </app-header>
  </template>
</dom-if>

脚本逻辑：

class MyApp extends Polymer.Element {
  static get is() { return 'my-app'; }
  static get properties() {
    return {
      currentRoute: {
        type: String,
        observer: '_onRouteChanged'
      },
      isHomeRoute: {
        type: Boolean,
        computed: '_computeIsHomeRoute(currentRoute)'
      }
    };
  }

  _computeIsHomeRoute(route) {
    return route === 'home';
  }

  _onHomeHeaderRendered() {
    // 通知app-header重新计算尺寸，适配父容器
    if (this.$.homeHeader) {
      this.$.homeHeader.notifyResize();
      // 强制触发样式更新，确保布局重绘
      this.updateStyles();
    }
  }

  _onRegularHeaderRendered() {
    if (this.$.regularHeader) {
      this.$.regularHeader.notifyResize();
      this.updateStyles();
    }
  }

  // 可选：路由切换后延迟触发一次布局更新，确保稳定性
  _onRouteChanged(newRoute) {
    setTimeout(() => {
      this.updateStyles();
    }, 100);
  }
}

window.customElements.define(MyApp.is, MyApp);

3. 排查布局上下文问题 #

有时候空白是因为app-header的父容器布局上下文不正确，比如父元素没有设置position: relative或者display: block，导致app-header无法正确计算自身尺寸。可以检查父容器的样式，确保：

• 父元素（比如app-layout或自定义容器）设置了position: relative
• 父元素的高度是明确的（比如100%或者固定值）

总结 #

优先推荐第一种动态修改属性的方案，不仅解决空白问题，还能提升页面性能。如果必须用dom-if，第二种方案的dom-change事件+notifyResize可以有效解决渲染时机导致的布局偏差。

内容的提问来源于stack exchange，提问作者zho