0

如何在聚合物 2.0 中创建无限滚动？我有一个 Iron-ajax 请求，而不是我在 dom-repeat 中推送数据

 <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.request？

4

1 回答 1

0

You have to define a threshold, using iron-scroll-threshold element.

In your case, it would be something like this:

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

And then your js:

loadMoreData: function() {
    this.$.show_news.generateRequest();
}
于 2017-05-12T14:29:22.997 回答