纸卷轴标题面板无法正常工作(paper

纸卷轴标题面板无法正常工作(paper-scroll-header-panel not working)

HTML文档正文在neon-animated-page包含两个独立的paper-scroll-header-panel 。 将neon-animated-page从第0页切换到第1页后，第1页上的paper-scroll-panel无效。

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

HTML document body contains two independent paper-scroll-header-panels inside a neon-animated-page. After switching the neon-animated-page from page 0 to page 1, the paper-scroll-panel on page 1 is not working.

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

最满意答案

原因：首次加载时，纸卷轴标题面板计算标题高度。 然后它只收听铁调整事件。 但是霓虹灯动画页面在切换页面时不会触发铁调整大小事件。 来自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()`.

解决方案：我已经通过显式调用第二个paper-scroll-header-panel的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(); } });

Reason : paper-scroll-header-panel when it is first loaded calculates the header height. Then it listens to only iron-resize event. But neon animated pages do not fire iron-resize event while switching pages. From https://github.com/PolymerElements/paper-scroll-header-panel/blob/master/paper-scroll-header-panel.html. line number 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()`.

Solution : I've solved this issue by calling measureHeaderHeight() method of the second paper-scroll-header-panel explicitly. check this http://jsbin.com/visazasena/edit?html,output

Polymer({ is: "inbox-view", next_page: function() { document.querySelector("#main-page").selected = 1; } });

Change this to

Polymer({ is: "inbox-view", next_page: function() { document.querySelector("#main-page").selected = 1; document.querySelector("#panel").measureHeaderHeight(); } });