在聚合物中第一个列表计分结束后，永远不会执行iron-scroll-threshold [英] iron-scroll-threshold is never executed after first list scolling is end in polymer

问题描述

我已经通过使用iron-list和iron-scroll-threshold进行了以下操作，以便在聚合物中实现无限滚动.但是问题是iron-scroll-threshold的loadMoreData在聚合物中的第一个列表滚动结束后再也不会执行.请帮助我代码中的哪一个丢失或错误.谢谢.

I've done as follow by using iron-list and iron-scroll-threshold in order to implement infinite-scrolling in polymer. But problem is loadMoreData for iron-scroll-threshold is never executed after first list scrolling is end in polymer. Please help me which one is missing or wrong in my code. Thanks.

<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>

推荐答案

问题出在iron-list rel ="nofollow">文档:

The problem is with iron-list, from the docs:

iron-list必须显式设置大小，或者委托滚动到显式设置的父级...

iron-list must either be explicitly sized, or delegate scrolling to an explicitly sized parent ...

您可以找到执行此操作的不同方法，但是在下面可以看到一个有效的示例.在此示例中，我还修复了categoriesLoaded函数，以便它可以加载更多数据，而不仅仅是替换旧数据.

There you can find different ways to do that, but below you can see a working example. In this example I also fixed the categoriesLoaded function so it would load more data not just replace the old one.

JSBin示例

我也在此处包含代码:

<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>

这篇关于在聚合物中第一个列表计分结束后，永远不会执行iron-scroll-threshold的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！