代码之家 › 专栏 › 技术社区 › moondaisy

安培显示加载指示灯亮显示更多

amp-list google-amp accelerated-mobile-page amp-html

1

moondaisy · 技术社区 · 6 年前

我跟随 this example 在AMP上执行“显示更多”操作。它工作得很好,但是当我点击按钮时,它不会显示任何东西给用户一个页面正在加载的想法。

我的后端不是特别快,所以看起来它直到最终加载东西才工作。

在 the demo 它也没有任何东西,但它非常快。

有什么办法吗?即使只是禁用按钮。我在列表或表单上看不到任何类更改来在CSS上使用它们。

这是我的代码:

amp-state id="#{section}State" src="#{path}"
amp-state id="#{section}"
  script type="application/json"
    | {
    | "page": 2,
    | "hasMorePages": true
    | }
|<amp-list src="#{path}" layout="responsive" height="600px" width="600px" [src]="#{section}State.items" [height]="(#{section}State.items.length / 3) * 400">
template[type="amp-mustache"]
  = render partial: item_template, locals: { image: image }
|</amp-list>
form method="GET" action="#{path}" action-xhr="#{path}" target="_top" on="submit-success: AMP.setState({ #{section}State: { items: #{section}State.items.concat(event.response.items) }, #{section}: { page: #{section}.page + 1, hasMorePages: event.response.hasMorePages } });" novalidate=""
  |<input type="hidden" name="page" value="2" [value]="#{section}.page">
  |<input type="submit"
         value="Show more"
         class="show-more"
         [class] = "(#{section}.hasMorePages == false ? 'hide' : 'ampstart-btn caps m1 mb3 show show-more')">

它只是示例中的一个,有一些命名更改。

1 回复 | 直到 6 年前

1

Sebastian Benz 6 年前

在提交表单时,有两个付款显示加载指示器:

使用 amp-form 内置的 submitting 状态:

<form ...>
  ...
  <button>Show more</button>
    ...
  <div submitting>
     Loading...
  </div>
</form>

如果需要更大的灵活性,可以在 amp-state 变量,例如 myFormState ,然后在不同的表单提交事件上更新。根据变量,您可以在页面上隐藏和显示不同的元素:

<form on="submit:         AMP.setState( { myFormState: 'submitting' } ),
          submit-success: AMP.setState( { myFormState: 'success' } ),
          submit-error:   AMP.setState( { myFormState: 'error' } )
         " ... >

<amp-list [hidden]="myFormState != 'success'" ... > ... </amp-list>
<div hidden [hidden]="myFormState != 'submitting'" ...>Loading</div>
<div hidden [hidden]="myFormState != 'error'" ...>Something went wrong :-(</div>