Polymer 在聚合物中结束第一次列表扫描后，不会执行“铁卷轴阈值”

我使用

iron list

和

iron scroll threshold

在polymer中实现无限滚动。但问题是，在第一次列表滚动结束后，

iron scroll threshold

的loadMoreData永远不会执行。请帮助我，我的代码中哪一个缺失或错误。谢谢

<template>

    <iron-ajax id="ajax" 
      url="https://randomuser.me/api/" 
      handle-as="json" 
      params='{"results": 20}'
      loading="{{loadingPeople}}"
      on-response="categoriesLoaded">
    </iron-ajax>

    <app-toolbar>
      <div main-title>Load data using iron-scroll-threshold</div>
    </app-toolbar>

    <iron-scroll-threshold on-lower-threshold="loadMoreData" id="threshold">
      <iron-list id="list" items="[[categoriesJobs]]" as="person" scroll-target="threshold">
        <template>
          <div>
            <div class="personItem" tabindex$="[[tabIndex]]">
              <iron-image class="avatar" sizing="contain" src="[[person.picture.medium]]"></iron-image>
              <div class="pad">
                <div class="primary">[[person.name.first]] [[person.name.last]]</div>
                <address>
                  [[person.location.street]] [[person.city]] <br />
                  [[person.location.city]], [[person.location.state]] [[person.location.postcode]]
                </address>
              </div>
            </div>
          </div>
        </template>
      </iron-list>
    </iron-scroll-threshold>

  </template>

  <script>
    Polymer({
      is: 'job-category',
      attached: function () {
        this.companyDetail = [];
        this.categoriesJobs = [];
      },
      loadMoreData: function () {
        this.$.ajax.generateRequest();
      },
      categoriesLoaded: function (e) {
        var people = e.detail.response.results;
        this.categoriesJobs = people;
        this.$.threshold.clearTriggers();
      }
    });
  </script>

</dom-module>

使用铁卷轴阈值加载数据
[[person.name.first][[person.name.last]]
[[person.location.street][[person.city]]

[[person.location.city]]，[[person.location.state][[person.location.postcode]]
聚合物({
是‘工作类别’，
附：函数（）{
this.companyDetail=[]；
this.categoriesJobs=[]；
},
loadMoreData:函数（）{
这是$.ajax.generateRequest（）；
},
类别加载：函数（e）{
var people=e.detail.response.results；
这个。分类工作=人；
此.$.threshold.clearTriggers（）；
}
});

问题在于

铁名单

，来自：

铁名单必须是显式大小，或委托滚动到显式大小的父

---

在那里你可以找到不同的方法来实现这一点，但下面你可以看到一个工作示例。在本例中，我还修复了

categoriesLoaded

函数，因此它将加载更多数据，而不仅仅是替换旧数据

我还包括以下代码：

<dom-module id="test-app">
  <template>

    <style>

      :host {

      }

      app-toolbar {
        height: 64px;
        background-color: grey;
      }

      iron-list {
        flex: 1 1 auto;
      }

      .container {
        height: calc(100vh - 64px);
        display: flex;
        flex-direction: column;
      }

    </style>

    <iron-ajax id="ajax" 
      url="https://randomuser.me/api/" 
      handle-as="json" 
      params='{"results": 20}'
      loading="{{loadingPeople}}"
      on-response="categoriesLoaded">
    </iron-ajax>

    <app-toolbar>
      <div main-title>Load data using iron-scroll-threshold</div>
    </app-toolbar>

    <div class="container">
      <iron-scroll-threshold on-lower-threshold="loadMoreData" id="threshold">
        <iron-list id="list" items="[[categoriesJobs]]" as="person" scroll-target="threshold">
          <template>
            <div>
              <div class="personItem" tabindex$="[[tabIndex]]">
                <iron-image class="avatar" sizing="contain" src="[[person.picture.medium]]"></iron-image>
                <div class="pad">
                  <div class="primary">[[person.name.first]] [[person.name.last]]</div>
                  <address>
                    [[person.location.street]] [[person.city]] <br />
                    [[person.location.city]], [[person.location.state]] [[person.location.postcode]]
                  </address>
                </div>
              </div>
            </div>
          </template>
        </iron-list>
      </iron-scroll-threshold>
    </div>

  </template>
  <script>
    Polymer({

      is: 'test-app',

      attached: function() {
        this.companyDetail = [];
        this.categoriesJobs = [];
      },

      loadMoreData: function () {
        console.log('load more data');
        this.$.ajax.generateRequest();
      },

      categoriesLoaded: function (e) {
        var self = this;
        var people = e.detail.response.results;
        people.forEach(function(element) {
          self.push('categoriesJobs', element);
        });
        this.$.threshold.clearTriggers();
      }

    });
  </script>
</dom-module>

：主持人{
}
应用程序工具栏{
高度：64px；
背景颜色：灰色；
}
铁名单{
flex:1自动；
}
.集装箱{
高度：计算（100vh-64px）；
显示器：flex；
弯曲方向：立柱；
}
使用铁卷轴阈值加载数据
[[person.name.first][[person.name.last]]
[[person.location.street][[person.city]]

[[person.location.city]]，[[person.location.state][[person.location.postcode]]
聚合物({
是：“测试应用程序”，
附：函数（）{
this.companyDetail=[]；
this.categoriesJobs=[]；
},
loadMoreData:函数（）{
log（“加载更多数据”）；
这是$.ajax.generateRequest（）；
},
类别加载：函数（e）{
var self=这个；
var people=e.detail.response.results；
people.forEach（功能（元素）{
self.push（'categoriesJobs'，元素）；
});
此.$.threshold.clearTriggers（）；
}
});

当我试图用自己的代码实现这一点时，我被困在categoriesLoaded方法中的forEach中。这里发生的事情var people=e.detail.response.results；细节和响应来自哪里？

categoriesLoaded

是一个事件监听器（注意iron ajax的

on response

声明）。

e

（事件）对象有一个名为

detail

的属性，该属性保存事件调度器提供的额外数据。在本例中，调度程序是

iron ajax

，额外的数据包含来自ajax请求的响应。我来这里是为了一个类似的问题（滚动阈值未触发-不同的场景）和

高度：calc（100vh-64px）和
显示：flex修复了我的所有问题