2017-10-15 83 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()

相關問題