如何在 Polymer 中显示加载动画

Question

我试图在 Iron-ajax 加载时显示加载微调器，否则，显示 AJAX 内容。但是，我只能根据加载属性之前的! 让 DOM 显示其中一个。

Polymer({
  is: 'example-element',
  connectedCallback() {
    console.log(this.loading); // logs undefined
  }
});

<base href="https://polygit.org/polymer+polymer+v2.5.0/components/" />
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer.html" />
<link rel="import" href="iron-ajax/iron-ajax.html" />
<link rel="import" href="paper-spinner/paper-spinner.html" />

<example-element></example-element>

<dom-module id="example-element">
  <iron-ajax id="ajax" url="https://api/endpoint" method="post" handle-as="json" content-type="application/json" body="[[request]]" last-response="{{response}}" loading="{{loading}}"></iron-ajax>

  <template is="dom-if" if="{{loading}}">
      <paper-spinner active></paper-spinner>
    </template>

  <template is="dom-if" if="{{!loading}}">
      <template is="dom-repeat" items="[[response]]" as="item">
        <p>[[item]]</p>
      </template>
  </template>
</dom-module>

是否需要在组件属性中显式设置加载属性？

Answer 1

在您的示例中，您实际上并没有告诉iron-ajax 做任何事情，所以它不会。

直到它做某事 loading 将是未定义的，你可以打印出加载的内容，这样你就可以看到它处于什么状态。

我已经整理了一个示例，该示例将向您显示状态，但也有一个按钮，因此您可以触发 iron-ajax 执行请求（我建议使用 chrome 作为示例）。

Polymer({
  is: 'example-element',
  _startRequest: function() {
    this.shadowRoot.querySelector('iron-ajax').generateRequest()
  }
});

<base href="https://polygit.org/polymer+polymer+v2.5.0/components/" />
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer.html" />
<link rel="import" href="iron-ajax/iron-ajax.html" />
<link rel="import" href="paper-spinner/paper-spinner.html" />
<link rel="import" href="paper-button/paper-button.html" />

<example-element></example-element>

<dom-module id="example-element">
  <template>
    <div>Loading status:[[loading]]</div>
    <iron-ajax id="ajax"
      url="https://api/endpoint"
      method="post"
      handle-as="json"
      content-type="application/json"
      body="[[request]]"
      last-response="{{response}}"
      loading="{{loading}}"></iron-ajax>

    <template is="dom-if" if="{{loading}}">
      <paper-spinner active></paper-spinner>
    </template>

  <template is="dom-if" if="{{!loading}}">
      I appear when loading is false
  </template>

  <br />
  <paper-button on-tap="_startRequest">Load</paper-button>
  </template>
</dom-module>

希望对您有所帮助?