2017-05-12 18 views
0

ポリマー2.0で無限のスクロールを作成する方法は?私は、DOMリピート私は次に何をすべきポリマー2.0で無限のスクロールを作成する方法は?

<iron-ajax id='show_news' last-response="{{data1}}" content-type="application/json" method="POST" auto url="http://1ss6.sss.197.80:7777/news" 
     on-response="create_news" body='{"news_type":"news", "round":"1"}'></iron-ajax> 
     <div style=" margin: 0 auto;" class="container flex-wrap"> 

      <template is="dom-repeat" items="{{data1}}"> 

       <style is="custom-style"> 

       </style> 
        <paper-card style="max-width: 600px; margin: 1em; overflow: hidden;" alt="mma2day"> 
        <div class="card-content"> 
         <iron-image style="" alt="The Polymer logo." src="http://188.166.26.223:3334/static/[[item.img]]" placeholder="/images/lazy.png" ></iron-image> 
         <div class="cafe-header">[[item.head]] 

         </div> 
         <div class="cafe-rating" style="color: #C00000; font-weight: bold;"> 
         <!-- <iron-icon class="star" icon="star"></iron-icon> 
         <iron-icon class="star" icon="star"></iron-icon> 
         <iron-icon class="star" icon="star"></iron-icon> 
         <iron-icon class="star" icon="star"></iron-icon> 
         <iron-icon class="star" icon="star"></iron-icon> --> 
         [[_sampleOutput(item.insert_date)]] 

         </div> 
         <div class="cafe-location cafe-light"> 
         <span style="color: #C00000; font-weight: bold;">[[item.site]]</span> 

         </div> 
        <!-- <p>[[item.head]]</p> 
         <p class="cafe-light">Small plates, salads &amp; sandwiches in an intimate setting with 12 indoor seats plus patio seating.</p> --> 
        </div> 

        </paper-card> 
      </template> 

にデータをプッシュするよりも、 私は、鉄AJAX要求を持っていますか? 私はリストの一番下にあり、ajax.requestを実行していることを理解するにはどうすればよいですか?

答えて

0

iron-scroll-threshold要素を使用してしきい値を定義する必要があります。これは、バージョン2.0で働いていない

loadMoreData: function() { 
    this.$.show_news.generateRequest(); 
} 
+0

<iron-scroll-threshold on-lower-threshold="loadMoreData"> <template is="dom-repeat" items="{{data1}}"> ... </template> </iron-scroll-threshold> 

そして、あなたのJS:あなたのケースでは

が、それはこのようなものになるだろう。スクロール時にページが読み込まれたときにすぐに下限しきい値で起動します – user2497209

+0

コンテナdivまたは 'iron-scroll-threshold'で' overflow:auto'を使用してみてください – haase

+0

それは役に立ちませんでした。 – user2497209

関連する問題