Question

我打算通过将scroll-target设置为"document"来实现使用PSK v3的无限滚动条，但它对PSK不起作用。以下是代码段：

<iron-scroll-threshold id="threshold"
    scroll-target="document"
    on-lower-threshold="queryMoreData">
  <iron-list items="[[items]]" grid>
    <template>
      <div>
        <div class="content">
          item: [[item.n]]
        </div>
      </div>
    </template>
  </iron-list>
</iron-scroll-threshold>

我已使用纯HTML测试scroll-target="document"，并且它运行良好。我想知道当用户滚动到特定页面/视图的末尾时，如何设置PSK来触发事件。

Answer 1

显然，您需要使用scroll-target中的以下代码将<iron-scroll-threshold>的{{1}}设置为scroll-target <app-header>： -

ready()

Answer 2

有时，您的滚动位置在开始时位于较低位置，而queryMoreData功能位于较低位置。在此功能中，您需要通过将clearTriggers方法调用queryMoreData函数来清除阈值：

queryMoreData() {
    //check if you have more data to load than

    ironScrollTheshold.clearTriggers();
}

之后，假设可滚动区域中的内容已经增长，它将再次开始侦听滚动位置以再次达到阈值。

Answer 3

您必须将iron-scroll-threshold元素的 scroll-target 属性设置为“ document ”。

还要注意，iron-list的 scroll-target 属性设置为iron-scroll-threshold元素的ID-“ 阈值”。< / p>

<iron-scroll-threshold scroll-target="document" id="threshold" on-lower-threshold="loadMoreData" lower-threshold="100">
<iron-list id="list" items="[[items]]" as="item" scroll-target="threshold" grid>
<!-- template -->
</iron-list>
</iron-scroll-threshold>

如何将<iron-scroll-threshold> scroll-target设置为Polymer Starter Kit的“document”

3 个答案: