scroll - Polymer 1.0 的无限滚动(无附加)

Question

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

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

同时，遗憾的是，iron-list 似乎还远没有准备好，我找不到任何方法将 core-list 的概念思想应用到 polymer 1.0 中。

那么......有什么建议吗？

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 以外的内容时采取相应行动。