我正在使用 Polymer Starter Kit 作为应用程序的基础。 所以，这是一个路由到特定部分的单页应用程序。 我的索引基本没变，你看这里https://github.com/PolymerElements/polymer-starter-kit/blob/master/app/index.html .
现在我在这里有了我的自定义元素
<dom-module id="lista-contatti">
<template>
<iron-ajax url="../../api/get_contacts.php" last-response="{{data}}" auto></iron-ajax>
<iron-list items="{{data}}" as="item" id="list">
<template>
<paper-icon-item>
<avatar class$="[[item.classe]]" item-icon></avatar>
<paper-item-body two-line>
<div><a href="{{computeLink(item.nome)}}"><span>[[item.nome]]</span> <span>[[item.cognome]]</span></a></div>
<div secondary><span>[[item.tipo]]</span></div>
</paper-item-body>
</paper-icon-item>
</template>
</iron-list>
</template>
</dom-module>
这是有效的，因为如果我为我的 iron-list 提供合适的类，我可以看到我的列表正在填充。唯一的问题是我的列表将呈现在我的主应用程序标题下(这是有道理的，因为我的列表布局合适)。
此外，如果我将列表放在单个 html 文件中，该列表与标题一起工作得很好，正如您在 iron-list 官方演示页面中看到的那样。
现在我想将我的列表保存在外部 dom 模块中，但我需要它与 polymer 初学者工具包的单页应用场景中页面的其他元素无缝协作。
编辑:这是我的 index.html 单页应用布局
<body>
<template is="dom-bind" id="app">
<paper-drawer-panel>
<paper-scroll-header-panel drawer fixed>
<paper-toolbar> ... </paper-toolbar>
<paper-menu> ... </paper-menu>
</paper-scroll-header-panel>
<paper-scroll-header-panel main condenses keep-condensed-header>
<paper-toolbar> ... </paper-toolbar>
<iron-pages attr-for-selected="data-route" selected="{{route}}">
<section data-route="foo"> ... </section>
<section data-route="contact">
<!-- HERE IS MY DOM-MODULE -->
<lista-contatti></lista-contatti>
</section>
</iron-pages>
</paper-scroll-header-panel>
</paper-drawer-panel>
</template>
</body>
我的 iron-list 不能像预期的那样与 paper-scroll-header-panel 一起工作，因为它嵌套在许多元素中，例如 iron-pages、section 和我的自定义 dom-module。该列表无法与标题高度交互，也无法与其无缝滚动。
最佳答案
在早期版本的 polymer 中，您必须将列表的 scrollTarget 绑定(bind)到标题面板的滚动条。 Polymer 0.5 video 中有关于此的幻灯片@11:58。在这种情况下，Polymer 1.0 中的更新代码可能类似于:
<paper-scroll-header-panel id="hPanel" main condenses keep-condensed-header>
<iron-list id="list" items="{{data}}" as="item" >
...
</iron-list>
</paper-scroll-header-panel>
脚本:
document.querySelector("#list").scrollTarget = document.querySelector("#hPanel").scroller;
注意:我还没有对此进行测试，但我认为它现在可能有助于为您指明正确的方向。
关于polymer - 带有 polymer 入门套件的自定义元素中的铁列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31786299/