Question

我想创建一个在达到当前页面底部时自动加载项目的Feed，但是不会触发iron-scroll-threshold。我正在使用我的api调用来填充模板中的项目，餐厅加载得很好。此外，当我将加载功能绑定到按钮时，它工作得很好。似乎铁滚动阈值永远不会触发。任何人都可以向我解释我错过了什么/做错了吗？
代码：

 <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();
  }
});

Answer 1

命名不一致

on-lower-threshold="loadMoreData"

loadMore: function()

聚合物铁滚动阈值不触发

1 个答案: