简体   繁体   中英

Polymer iron-scroll-threshold not triggering

I want to make a feed that automatically loads items when the bottom of the current page is reached, however the iron-scroll-threshold doesn't trigger. I'm using my api call to fill the items in the template and the restaurants load just fine. Also when I bind a load function to a button it works just fine. It seems that the iron-scroll-threshold never triggers. Can anyone explain to me what I'm missing/doing wrong?
Code:

 <iron-scroll-threshold id="threshold" lower-threshold="100" on-lower-threshold="loadMoreData">
  <div id="scroller" class="vertical layout center" fill>
    <template is="dom-repeat" items="[[restaurants]]" filter="{{computeFilter(searchInput)}}" scroll-target="threshold" on-scroll="_scrollHandler">
      <!-- Items -->
    </template>
    <div class="loadingIndicator" hidden$="[[!loadingRestaurants]]">
      <paper-spinner active$="[[loadingRestaurants]]"></paper-spinner> Fetching restaurants</b>
    </div>
  </div>
  </iron-scroll-threshold>
<script>
Polymer({

  is: 'my-view2',
  properties: {
    restaurants:{
      type: Array,
      value: []
    },
    offset:{
      type: Number,
      value: 0
    },
    limit:{
      type: Number,
      value: 50
    },
    loadingRestaurants: Boolean
  },
  ready: function () {
    this.$.requestRestaurants.generateRequest();
  },
  handleResponse: function (data) {
    var self = this;
    var response = data.detail.response;
    response.forEach(function(restaurant){
      self.push('restaurants', restaurant);
    });
    console.log(this.restaurants);
    this.$.threshold.clearTriggers();
  },
  toggle: function(e) {
    console.log(this.$.threshold.top);
    var index = "#collapse" + e.model.__data.index;
    this.$$(index).toggle();
    this.loadMore();
  },
  loadMore: function() {
    console.log("test");
    this.offset+=50;
    this.limit+=50;
    this.$.requestRestaurants.generateRequest();
    this.$.threshold.clearLower();
    this.$.threshold.clearTriggers();
  }
});

命名不一致

on-lower-threshold="loadMoreData"

loadMore: function()

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM