Question

我在使用iron-page以及与其他网页共享同一主机的paper-tabs时遇到了麻烦。

我的应用程序用户界面上有iron-scroll-threshold。随着标签的更改，页面会被懒惰地加载。其中一个页面包含来自端点的大量AJAX数据，因此我必须在其上实现滚动分页。

我的问题是，我试图让iron-list在该特定页面中触发（与其他页面共享相同的dom滚动）。我知道我可以考虑将overflow与页面的显式高度结合使用，但我不想这样做，因为它会自动添加两个on-lower-threshold来破坏我应用的用户体验。

我的问题是，每当我到达特定iron-page的底部时，如何触发dom-repeat？我尝试使用<iron-scroll-threshold lower-threshold="100" on-lower-threshold="loadMoreData" scroll-target="itemlist" > <template is="dom-repeat" items="[[data]]" as="list" id="itemlist"> <a href="[[list.id]]"> <p>[[list.name]]</p> </a> </template> </iron-scroll-threshold>跟随它。

   <dependency>
        <groupId>org.apache.kafka</groupId>
        <artifactId>kafka-clients</artifactId>
        <version>0.9.0.0</version>
    </dependency>

我面临的另一个问题是它会在ajax调用完成之前自动触发事件。在那之后，即使dom已经加载，它也不会再次发射。

如果您不清楚，可以向我提出更具体的问题。新年快乐的人们！

Answer 1

应删除<iron-scroll-threshold>.scrollTarget设置，因为在这种情况下<iron-scroll-threshold>本身就是滚动目标。

您可以创建一个自定义页面元素，其中包含<iron-scroll-threshold>作为项容器。确保将其高度设置为100%。

<dom-module id="x-page">
  <template>
    <style>
      :host {
        display: block;
        height: 100%;
      }
      iron-scroll-threshold {
        height: 100%;
        overflow: auto;
      }
    </style>
    <iron-scroll-threshold lower-threshold="100"
                           on-lower-threshold="_loadMoreData">
      <template is="dom-repeat" items="[[items]]">
        <div>[[index]]: [[item]]</div>
      </template>
    </iron-scroll-threshold>
  </template>
</dom-module>

codepen

铁页上的铁滚动阈值

1 个答案: