使用iron-ajax、iron-list处理大型JSON文件，并通过iron-scroll-threshold加载

Question

我正在尝试将一个大型JSON文件加载到我的视图中，该文件包含1000多个项目，我希望视图一次只导入20个项目。每次我使用iron-list时，它只渲染3个项目，直到我调整窗口大小，然后一次加载json中的所有项目。

你知道我如何先渲染20个项目，然后滚动到底部，得到更多的项目吗？

谢谢。

<dom-module id="fetch">
  <template>
    <style>
      :host {
        display: block;
      }
      paper-card{
        margin-bottom: 1em;
        padding: 1em;
      }
    </style>
    <h2>Hello [[prop1]]</h2>
    <content class="horizontal">
      <paper-material>
          <iron-ajax
              auto
              url="/some.json"
              handle-as="json"
              last-response="{{ajaxResponse}}"
              debounce-duration="300"></iron-ajax>

<iron-scroll-threshold on-lower-threshold="loadMoreData" id="threshold">
        <iron-list items="[[ajaxResponse]]" scroll-target="threshold">
          <template>
            <paper-card>
              <div id="card-content">
                <h4>User:{{item.val}}</h4>
                <h4>{{item.val2}}</h4>
              </div>
              <div class="card-action">
                <paper-button>Icon</paper-button>
                <paper-button>Like</paper-button>
                <paper-fab>Open</paper-fab>
              </div>
            </paper-card>
          </template>
        </iron-list>
      </iron-scroll-threshold>
      </paper-material>
    </content>
  </template>

  <script>

    Polymer({
      is: 'fetch',

      properties: {
        prop1: {
          type: String,
          value: 'fetch'
        },
      }
    });
  </script>
</dom-module>

Answer 1

我假设您的iron-list的容器(<content class="horizintal>)没有显式的大小，这可能会导致问题。

根据docs的说法

重要提示: iron-list必须显式调整大小，或者将滚动委托给显式调整大小的父级。所谓“显式调整大小”，我们的意思是它要么通过一个类或内联样式设置一个显式的CSS高度属性，要么通过其他布局方法(例如flex或fit类)调整大小。

或者，您可以在设置数据时触发调整大小事件：

document.querySelector('iron-list').fire('iron-resize');