铁页面上的铁滚动阈值

Question

我在使用iron-scroll-threshold和一个与其他页面共享同一主机的iron-page时遇到了问题。

我的应用程序UI顶部有paper-tabs。随着选项卡的更改，页面会懒加载。其中一个页面包含大量来自端点的AJAX数据，因此我必须在其中实现滚动分页。

我的问题是，我正在尝试在特定页面（与其他页面共享相同的dom滚动）中触发iron-scroll-threshold。 我知道我可以考虑为页面使用具有显式高度的iron-list，但我不想这样做，因为它通过自动添加两个overflow破坏了我的应用程序的UX。

我的问题是，如何在到达特定iron-page底部时触发on-lower-threshold？ 我尝试按照以下方式使用它与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>

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

如果您还有具体问题，请提问。大家新年快乐！

- Kaung Myat Lwin

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

可以保留不变，是一个 HTML 标记，用于在网页中插入链接。该链接可能指向 CodePen 网站或者 CodePen 的某个页面。

- tony19