如何将 core-scroll-header-panel 与 core-animated-pages 一起使用

Question

继 How to use core-scroll-header-panel with core-list 之后，我想将 core-list 放在 core-animated-pages

中

我修改了jsbin that Jeff Posnick provided in his answer to add the core-animated-pages. See http://jsbin.com/xibile/1

不幸的是，core-animated-pages 在确定自己的大小时似乎忽略了其子项的大小。我可以通过将 list-test 的溢出更改为 visible 而不是 hidden 来解决这个问题。请参阅 http://jsbin.com/xibile/2（请注意，您需要在列表呈现之前调整 window 的大小）

这工作得相当不错，但似乎是一个 hack。在我介绍 core-animated-pages 之前，内容 div 优雅地增长以适应其子项（列表测试）的大小。现在它没有了，我只是通过 overflow

摆脱了它

如何让 core-animated-pages 调整为当前所选子项的大小？

这似乎是asked before，但没有满意的答案。我希望这在最新版本的核心元素中有所改变

此外，如果有人知道如何修复它，这样您就不必调整 window 的大小来渲染列表，那也很棒。

Answer 1

在 .content div 中，尝试用 session 包裹 list-test，您将再次拥有一个可滚动的列表。请看这个 jsbin.

<div class="content">
  <core-animated-pages id="pages" selected="0">
    <session>
      <list-test id="list" data="{{data}}"></list-test>
    </session>
  </core-animated-pages>
</div>

原因如下。

在用 core-animated-pages 包裹 list-test 之前，.content div 有一个 absolute 位置（用 padding-top 所以它没有被 core-scroll-header-panel) 的主标题所掩盖，那是 why 您的 list-test 显示正确。

现在您用默认 position 为 relative 的 core-animated-pages 包装它，您的列表将折叠起来。

修复很简单，将您的 list-test 换成另一个 session。您甚至不需要将其设为 fit，因为 core-animated-pages 会自动将其 direct children 设为下面的 css -

{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

希望对您有所帮助！

更新

对于 core-list 渲染错误，您可能可以在短暂的一天（50 毫秒）后摆脱 re-calling updateSize()，就像这样 -

    t.addEventListener('template-bound', function () {
        var list = document.querySelector('list-test::shadow core-list');
        // to update the size
        list.updateSize();
        this.job('delay', function () {
            list.updateSize();
        }, 50);

这是另一个 jsbin。希望 Polymer 团队将来会解决这个问题！

如何将 core-scroll-header-panel 与 core-animated-pages 一起使用

How to use core-scroll-header-panel with core-animated-pages

polymer

core-elements