纸张滚动标题面板不起作用答案

【问题标题】：paper-scroll-header-panel not working纸张滚动标题面板不起作用
【发布时间】：2015-12-21 22:31:51
【问题描述】：

HTML 文档正文在 neon-animated-page 中包含两个独立的 paper-scroll-header-panels。将neon-animated-page从第0页切换到第1页后，第1页的paper-scroll-panel不起作用。

http://jsbin.com/winedi/edit?html,output

【问题讨论】：

标签： polymer web-component paper-elements

【解决方案1】：

原因：paper-scroll-header-panel 首次加载时会计算页眉高度。然后它只监听 iron-resize 事件。但是霓虹动画页面在切换页面时不会触发 iron-resize 事件。来自https://github.com/PolymerElements/paper-scroll-header-panel/blob/master/paper-scroll-header-panel.html。行号 230

 * By default, the height will be measured when it is ready.  If the height
       * changes later the user needs to either set this value to reflect the
       * new height or invoke `measureHeaderHeight()`.

解决方案：我已经通过显式调用第二个纸卷页眉面板的 measureHeaderHeight() 方法解决了这个问题。检查这个http://jsbin.com/visazasena/edit?html,output

Polymer({
  is: "inbox-view",

  next_page: function() {
    document.querySelector("#main-page").selected = 1;
  }

});

改成

Polymer({
  is: "inbox-view",

  next_page: function() {
    document.querySelector("#main-page").selected = 1;
    document.querySelector("#panel").measureHeaderHeight();

  }
});

【讨论】：

document.querySelector("patent-view paper-scroll-header-panel").fire("iron-resize");