[英]AMP show loading indicator on Show More
我按照此示例在 AMP 上实施“显示更多”操作。 它工作得很好,但是当我点击按钮时,它没有显示任何内容让用户认为页面正在加载。
我的后端不是特别快,所以看起来它直到最终加载时才起作用。
在演示中,它也没有任何内容,但速度非常快。
有什么可以做的吗? 即使它只是禁用按钮。 我在列表或表单上没有看到任何类更改,以便在 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')">
这只是示例中的一个,但进行了一些命名更改。
在表单提交时显示加载指示器有两种支付方式:
使用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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.