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

Handling large JSON file with iron-ajax, iron-list and loading via iron-scroll-threshold

本文关键字：处理 加载 大型 JSON 文件 iron-scroll-threshold iron-ajax iron-list 使用      更新时间：2023-09-26

我试图将一个大型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>

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

根据文档

重要:iron-list必须显式设置大小，或者委托滚动到显式大小的父级。通过"显式大小"，我们意味着它要么有一个显式的CSS高度属性设置通过类或内联样式，否则通过其他布局方式(例如flex或健康类).

或者您可以在设置数据时触发一个resize事件:

document.querySelector('iron-list').fire('iron-resize');
相关文章：