0

好吧，首先，告诉我我会走正确的兔子洞吗？

我正在构建一个新的 PWA，它将首先为移动设备设计，

我已经构建了我的后端 API，并且正在开发我的前端。我目前正在使用带有 Vaadin-Grid 的 Polymer 3。

我想做的是让列表无限滚动，这应该很简单，但我一直没有例子。

谁能指出我正确的方向？

    import { PolymerElement, html } from '@polymer/polymer/polymer- 
    element.js';
    import '@polymer/iron-ajax/iron-ajax.js';
    import '@vaadin/vaadin-grid/vaadin-grid.js';
import './shared-styles.js';

class MyView1 extends PolymerElement {

  static get template() {
return html`
  <style include="shared-styles">
    :host {
      display: block;

      padding: 10px;
    }
  </style>

  <div class="card">
    <div class="circle">

        </div>
    <h1>View One</h1>
     <vaadin-grid aria-label="Basic Binding Example" items="[[data]]">

  <vaadin-grid-column>
    <template class="header">RecordID</template>
    <template>[[item.recordID]]</template>
  </vaadin-grid-column>

  <vaadin-grid-column>
    <template class="header">File Ref</template>
    <template>[[item.fileRef]]</template>     
  </vaadin-grid-column>

<vaadin-grid-column>
    <template class="header">Description</template>
    <template>[[item.description]]</template>     
  </vaadin-grid-column>

</vaadin-grid> 

  </div>

`;
  }

connectedCallback(){
super.connectedCallback();
fetch('http://localhost:56132/api/matters')
.then(r => r.json())
.then(data => this.data = data);
}

}


window.customElements.define('my-view1', MyView1);
4

1 回答 1

0

有一个示例使用vaadin-grid它从回调中填充数据（而不是直接设置所有项目）：https ://vaadin.com/components/vaadin-grid/html-examples/grid-data-demos （查看Assigning Remote/Function Data演示） .

（粘贴此处示例中的代码，以使此答案更具前瞻性）

<x-remote-data-example></x-remote-data-example>
<dom-module id="x-remote-data-example">
  <template preserve-content>
    <vaadin-grid aria-label="Remote Data Example" data-provider="[[dataProvider]]" size="[[size]]">

      <vaadin-grid-column width="60px" flex-grow="0">
        <template class="header">#</template>
        <template>[[index]]</template>
      </vaadin-grid-column>

      <vaadin-grid-column>
        <template class="header">First Name</template>
        <template>[[item.firstName]]</template>
      </vaadin-grid-column>

      <vaadin-grid-column>
        <template class="header">Last Name</template>
        <template>[[item.lastName]]</template>
      </vaadin-grid-column>

    </vaadin-grid>
  </template>
  <script>
    window.addEventListener('WebComponentsReady', function() {
      Polymer({
        is: 'x-remote-data-example',

        ready: function() {
          this.size = 200;
          this.dataProvider = function(params, callback) {
            var xhr = new XMLHttpRequest();
            xhr.onload = function() {
              callback(JSON.parse(xhr.responseText).result);
            };
            var index = params.page * params.pageSize;
            xhr.open('GET', 'https://demo.vaadin.com/demo-data/1.0/people?index=' + index + '&count=' + params.pageSize, true);
            xhr.send();
          };
        }

      });
    });
  </script>
</dom-module>

基本上你需要设置data-provider属性，而不是items直接使用。

但请记住，您仍然需要知道数据集的总大小，如演示说明中所述：

注意：项目总数必须设置为网格。下面的示例使用 size 属性设置项目的总数。

于 2018-07-10T11:08:38.107 回答