加载更多的内容上的按钮点击在聚合物

Load more content on button click in Polymer

本文关键字：聚合物 按钮 加载      更新时间：2023-09-26

在聚合物中，我试图延迟加载DOM中的内容。有一个例子，这样做的滚动使用iron-scroll-threshold。但是如何实现相同的按钮点击??

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

这是我要测试的代码

您缺少this:

handleTap: function() {
    this._loadMoreData();
}
相关文章：