我已经使用谷歌amp列表开发了这个页面，并显示了更多的按钮组件https://www.newsapp.io/ampproject。我面临的问题是，在showmore按钮获取新数据并显示页面移动到顶部(第一项(后，我希望它保持在原始位置。我使用了与文档中给出的代码完全相同的代码：https://ampbyexample.com/advanced/show_more_button/。这是我的列表代码：-
<amp-state id="productsState" src="https://www.newsapp.io/amp">
</amp-state>
<!-- ... while the `amp-state` with id `product` is just used to implement the show-more logic where we are allowing the user to click 3 times. -->
<amp-state id="product">
<script type="application/json">
{
"moreItemsPageIndex": 0,
"hasMorePages": true
}
</script>
</amp-state>
<!-- We bind the `src` attribute of the `amp-list` to the `amp-state` object containing the products
from that component as a `src`. We also dynamically change the height of the amp-list based on
the number of items (each item has a height of `24px`). -->
<amp-list src="https://www.newsapp.io/amp"
[src]="productsState.items"
width="auto"
height="600"
[height]="productsState.items.length * 10"
class="m1">
<template type="amp-mustache"><div class="card mt1">
<amp-img src="{{approved_image}}" width="5" height="2" layout="responsive" alt="The final spritzer" class="mb1"></amp-img>
<h3 class="mb1 px3"><a href="">{{approved_title}}</a> </h3>
<i class="px3">{{timeago}} ago</i>
<ul class="ampstart-social-follow list-reset flex flex-wrap m0 mb1 px3">
<li>
<a href="http://www.facebook.com/share.php?u={{name}}" target="_blank" class="inline-block p1" aria-label="Link to AMP HTML Twitter"><i class="fab fa-facebook-square"></i></a>
</li>
<li>
<a href="https://twitter.com/share?url={{name}}&text={{name}}" target="_blank" class="inline-block p1" aria-label="Link to AMP HTML Twitter"><i class="fab fa-twitter-square"></i></a>
</li>
<li>
<a href="https://plus.google.com/share?url={{name}}" target="_blank" class="inline-block p1" aria-label="Link to AMP HTML Twitter"><i class="fab fa-linkedin"></i></a>
</li>
<li>
<a href="https://www.linkedin.com/shareArticle?mini=true&url={{name}}" target="_blank" class="inline-block p1" aria-label="Link to AMP HTML Twitter"><i class="fab fa-google-plus-square"></i></a>
</li>
<li>
<a href="whatsapp://send?text={{name}}" target="_blank" class="inline-block p1" aria-label="Link to AMP HTML Twitter"><i class="fab fa-whatsapp-square"></i></a>
</li>
</ul>
<p class="mb1 px3">{{approved_description}} </p>
<div class="px3">
<button class="ampstart-btn ampstart-btn-secondary mb1 px3">
Read more
</button>
</div>
</div>
</template>
</amp-list>
<!-- The show more button is implemented via a form which triggers a page update on the `submit-success` event.
We are then merging the form results into the items already loaded by the `amp-state` using the `concat` function. -->
<form method="GET"
action="relatedamp#aeohig"
action-xhr="relatedamp"
target="_top"
on="submit-success: AMP.setState({
productsState: {
items: productsState.items.concat(event.response.items)
},
product: {
moreItemsPageIndex: product.moreItemsPageIndex + 1,
hasMorePages: event.response.hasMorePages
}
});">
<input type="hidden" name="moreItemsPageIndex" value="0" [value]="product.moreItemsPageIndex">
<input type="submit"
value="Show more"
class="ampstart-btn caps m1 show"
[class] = "(product.hasMorePages == false ? 'hide' : 'ampstart-btn caps m1 mb3 show')">
</form>
该行为是不可复制的。然而，我注意到控制台错误，它阻止了表单提交操作。我建议首先修复以下控制台错误。
- 在"action"属性中包含右端点。该值必须是https URL(绝对或相对(，并且不能是指向CDN的链接。目前，它被设置为无效值("relatedamp#aeohig"(
- 请确保服务器端点实现CORS安全性要求。请参阅：https://www.ampproject.org/docs/fundamentals/amp-cors-requests#cors-amp中的安全性