javascript - iron-page 上的 iron-scroll-threshold

Question

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

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

我的问题是，我试图让 iron-scroll-threshold 在那个特定页面(与其他页面共享相同的 dom 滚动)中触发。我知道我可以考虑使用具有明确页面高度的 iron-list，但我不想这样做，因为它通过自动添加两个 overflow 破坏了我的应用程序的用户体验。

我的问题是，当我到达特定 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 已经加载，它也不会再触发。

如果您不清楚，可以问我更具体的问题。各位新年快乐!

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