Question

在Polymer中，我试图延迟加载DOM中的内容。使用iron-scroll-threshold滚动时有一个示例。但是如何在按钮点击上实现相同的效果？

＆＃13;

<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>

＆＃13;

Here's the code that I'm trying out

Answer 1

您错过了this：

handleTap: function() {
    this._loadMoreData();
}

在Polymer中按钮单击时加载更多内容

1 个答案: