Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<head>
  <base href="https://polygit.org/polymer+1.5.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="iron-list/iron-list.html">
  <link rel="import" href="iron-scroll-threshold/iron-scroll-threshold.html">
  <link rel="import" href="paper-progress/paper-progress.html">
</head>
<body>
<x-foo></x-foo>
​
<dom-module id="x-foo">
  <template>
    <style>
      iron-list {
        height: 400px;
      }
    </style>
​
    <iron-scroll-threshold id="threshold"
                           lower-threshold="50"
                           on-lower-threshold="_loadMoreData"
                           lower-triggered="{{nearBottom}}">
      
      <iron-list scroll-target="threshold" items="[[items]]">
        <template>
          <div>[[index]]: [[item]]</div>
        </template>
      </iron-list>
    </iron-scroll-threshold>
<button on-tap="handleTap">Load More</button>
    <template is="dom-if" if="[[nearBottom]]">
      <paper-progress indeterminate></paper-progress>
    </template>
  </template>
​
  <script>
    HTMLImports.whenReady(function() {
      Polymer({
        is: 'x-foo',
        properties: {
          items: {
            type: Array,
            value: function() { return []; }
          }
        },
        handleTap: function() {
        _loadMoreData();
      },
        _loadMoreData: function() {
          console.log('loading 100 more...');
​
          // simulate network delay
          this.async(function() {
            for (let i = 0; i < 50; i++) {
              this.push('items', Math.random());
            }
            this.$.threshold.clearTriggers();
          }, 500);
        }
      });
    });
  </script>
</dom-module>
</body>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
krishnathotapro
0viewers