polymer - 纸卷页眉面板不起作用

标签 polymer web-component paper-elements

HTML 文档正文包含两个独立的 paper-scroll-header-panel s 在 neon-animated-page 内.切换后neon-animated-page从第 0 页到第 1 页,paper-scroll-panel在第 1 页上不起作用。

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

最佳答案

原因:paper-scroll-header-panel 首次加载时计算页眉高度。然后它只监听 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()`.

解决方案:我已经通过显式调用第二个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();

  }
});

关于polymer - 纸卷页眉面板不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34405453/

相关文章:

dart - 使用 Dart 键

unit-testing - Selenium 服务器未启动。另一个 Selenium 进程可能已经在运行,或者您的 java 版本可能已过时

material-design - paper-input - 单击输入字段时 float 标签

javascript - 在 Polymer 回调函数中访问 div

嵌套 polymer 元素之间的数据绑定(bind)

javascript - Angular 13 从 HTML 字符串加载/编译动态 Angular 组件

javascript - 与 Polymer 一起使用时,CSS 样式不会应用于 Firefox 中的 ag-grid

validation - paper-input : different error-messages (w and w/o auto-validate)

javascript - Polymer.prototype.splice 的行为不符合预期

javascript - polymer 防止数据绑定(bind)