Question

我使用iron-list和iron-scroll-threshold完成了以下操作，以便在聚合物中实现无限滚动。但问题是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>

Answer 1

问题出在iron-list上的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>函数，因此它将加载更多数据，而不仅仅是替换旧数据。

docs

我还在这里包含代码：

{{1}}

在第一个列表搜索以聚合物结束后，从不执行iron-scroll-threshold

1 个答案: