2017-10-15 86 views
0

我想制作一个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(); 
    } 
}); 

回答

0

的命名是不一致的

on-lower-threshold="loadMoreData"

loadMore: function()

相关问题