Question

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

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

与此同时，遗憾的是，铁列表似乎尚未准备就绪，我无法找到任何方法将核心列表的概念用于聚合物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以外的其他内容时进行相应操作。

聚合物1.0的无限滚动（无附加）

1 个答案: