Infinite Scroll for Polymer 1.0（无追加）

Question

尝试混合一些 jQuery 但一切都基于附加，这是我不想使用的东西，因为我试图将我的设计完全基于绑定和冲压模板和元素。我尝试以各种方式使用 scrollTop，但我总是最终依赖于附加在本地 DOM 上的内容。如果我没记错的话，dom-repeat 与附加无关，而是与创建相同的图章并多次绑定它有关（如果我错了请纠正我，我最近开始研究 Polymer 1）。

我只发现了一个在重复模板上使用无限滚动的好例子 https://github.com/chadliu23/event-infinite-scroll 但不幸的是，这不是我要找的，因为我正在混合 iron-ajax 将数据解析到我的模板。模拟 chadliu23 的示例让我进入了一个愚蠢的中间步骤，即创建一个额外的数组并将数据从 ajax 推入其中，但这完全是我不想做的事情，因为它弄乱了我的 repeatable模板重新标记。还意识到有一些方法可以用 css 创建无限滚动效果，但除了在图像集中无法想出任何其他方法来实现它。

与此同时，可悲的是，似乎 iron-list 还远未准备就绪，我找不到任何方法将 core-list 的概念用于 polymer 1.0。

所以.....对 table 有什么建议吗？

Answer 1

我认为你需要一个 item-page 组件：

<dom-module id="item-page">
  <template>
    <iron-ajax id="ajax"
      params="{{_composeParamsForPage(page)}}"
      last-response="{{pageData}}">
    </iron-ajax>
    <template is="dom-repeat" items="{{pageData}}" as="item">
      <!-- Compose your list of items for this page here -->
    </template>
  </template>

  <script>
    (function(){
      "use strict";

      Polymer({
        is: 'item-page',
        properties: {
          page: {
            type: Number,
            observer: '_updatePage(page)'
          }
        },
        _updatePage: function(page) {
          this.$.ajax.generateRequest();
        }
      });
    })();
  </script>
</dom-module>

然后，创建一个无限滚动的列表：

<template is="dom-repeat" items="{{pages}}" as="page">
  <item-page page="{{page}}"></item-page>
</template>

重要的是，在您的 item-page 组件中 iron-ajax 而不是 设置了 auto，因为 page 属性最初将设置为 undefined。相反，您应该观察 page 并仅在更新为 undefined.

以外的内容后才采取相应行动

Infinite Scroll for Polymer 1.0（无追加）

Infinite Scroll for Polymer 1.0 (without appending)

scroll

infinite

polymer