Question

我的Google端点服务使用list-method返回一些数据。

我可以在铁列表中显示这些数据 - 这里的一切都很好。

但是 - 因为数据的数组很大 - 我喜欢从列表中返回一些＆＃34;页面＆＃34; - 例如100个元素。

所以，问题是 - 如何获取新的数据部分，然后铁列表将滚动到已经收到的数组的末尾？对它有任何样品或建议吗？

Answer 1

iron-scroll-threshold在这里是合适的。在以下示例中，_loadMoreData()从底部滚动到iron-list时会调用200px，在您的情况下，您可以在此处查询Google Endpoints服务以获取更多数据。

// template
<iron-scroll-threshold id="threshold"
                       lower-threshold="200"
                       on-lower-threshold="_loadMoreData">
  <iron-list scroll-target="threshold" items="[[items]]">
    <template>
      <div>[[index]]: [[item]]</div>
    </template>
  </iron-list>
</iron-scroll-threshold>

// script
Polymer({
  ...
  _loadMoreData: function() {
    var data = this.queryGoogleEndpointService();
    // append data to `this.items`
  }
}

<head>
  <base href="https://polygit.org/polymer+1.11.1/iron-scroll-threshold+PolymerElements+:1.x/webcomponents+webcomponents+:v0/components/">
  <script src="webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="iron-list/iron-list.html">
  <link rel="import" href="iron-scroll-threshold/iron-scroll-threshold.html">
  <link rel="import" href="paper-progress/paper-progress.html">
</head>
<body>
<x-foo></x-foo>

<dom-module id="x-foo">
  <template>
    <style>
      iron-list {
        height: 400px;
      }
    </style>

    <iron-scroll-threshold id="threshold"
                           lower-threshold="200"
                           on-lower-threshold="_loadMoreData"
                           lower-triggered="{{nearBottom}}">
      <iron-list scroll-target="threshold" items="[[items]]">
        <template>
          <div>[[index]]: [[item]]</div>
        </template>
      </iron-list>
    </iron-scroll-threshold>

    <template is="dom-if" if="[[nearBottom]]">
      <paper-progress indeterminate></paper-progress>
    </template>
  </template>

  <script>
    HTMLImports.whenReady(function() {
      Polymer({
        is: 'x-foo',
        properties: {
          items: {
            type: Array,
            value: function() { return []; }
          }
        },
        _loadMoreData: function() {
          console.log('loading 100 more...');

          // simulate network delay
          this.async(function() {
            for (let i = 0; i < 100; i++) {
              this.push('items', Math.random());
            }
            this.$.threshold.clearTriggers();
          }, 500);
        }
      });
    });
  </script>
</dom-module>
</body>

codepen

使用＆＃34;页面＆＃34;铁列表和加载数据

1 个答案: