Amp html AMP显示加载指示器显示更多信息
我随后对AMP执行了“显示更多”操作。它工作得很好,但当我点击按钮时,它不会显示任何内容,让用户知道页面正在加载 我的后端速度不是特别快,所以看起来它直到最终加载东西才工作 里面也没有任何东西,但速度非常快 有什么办法吗?即使只是禁用按钮。我看不到列表或表单上有任何类更改,因此无法在CSS上使用它们 这是我的代码:Amp html AMP显示加载指示器显示更多信息,amp-html,accelerated-mobile-page,google-amp,amp-list,Amp Html,Accelerated Mobile Page,Google Amp,Amp List,我随后对AMP执行了“显示更多”操作。它工作得很好,但当我点击按钮时,它不会显示任何内容,让用户知道页面正在加载 我的后端速度不是特别快,所以看起来它直到最终加载东西才工作 里面也没有任何东西,但速度非常快 有什么办法吗?即使只是禁用按钮。我看不到列表或表单上有任何类更改,因此无法在CSS上使用它们 这是我的代码: amp-state id="#{section}State" src="#{path}" amp-state id="#{section}" script type="appli
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')">
amp state id=“#{section}state”src=“#{path}”
amp state id=“#{section}”
script type=“application/json”
| {
|“第2页”,
|“hasMorePages”:正确
| }
|
模板[type=“amp mustache”]
=呈现部分:项\模板,局部变量:{image:image}
|
form method=“GET”action=“#{path}”action xhr=“#{path}”target=“#top”on=“submit success:AMP.setState({section}State:{items:{items:{section}State.items.concat(event.response.items)},{section}:{page:{page:{section}page+1,hasMorePages event.response.hasMorePages}novalidate=“”
|
|
它只是示例中的一个,有一些命名更改。在表单提交上显示加载指示器有两种方式:
amp表单
的内置提交
状态:
<form ...>
...
<button>Show more</button>
...
<div submitting>
Loading...
</div>
</form>
谢谢,我最终意识到表单在提交
.amp表单提交时添加了这个类,但是您的答案提供了一种更好、更灵活的方法
<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>