首页 文章

带有聚合物入门套件的定制元件内的铁列表

提问于
浏览 次
3

我正在使用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>

这是有效的，因为如果我给我的铁列表一个合适的类，我可以看到我的列表填充 . 唯一的问题是我的列表将在我的主应用程序 Headers 下呈现（这是有道理的，因为我的列表给出了合适的布局） .

此外，如果我把它放在一个单独的html文件中，列表可以很好地使用 Headers ，你可以在铁列表官方演示页面中看到 .

现在我想将我的列表保存在外部dom模块中，但我需要它在聚合物入门套件的单页面应用场景中与页面的其他元素无缝协作 .

编辑：这是我的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 . 该列表可以't interact with the header height and doesn'与它无缝滚动 .

polymer polymer-1.0 polymer-starter-kit

1 回答

  • 0

    在早期版本的聚合物中，您必须绑定列表's scrollTarget to header panel' s卷轴 . 在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;

    注意：我还没有对此进行测试，但认为现在可能有助于指出正确的方向 .

    回复于

相关问题