Amp html 在产品列表页面中加载更多不适用于amp列表的内容

在这里，我得到了页面加载时要显示的前20个产品详细信息，当单击“显示更多”按钮时，我将获取接下来的20个产品，并将它们附加到以前的结果中

在Mozilla Firefox浏览器中，首次加载页面时“加载更多”按钮工作正常，但当我重新加载页面时，“加载更多”按钮不工作

在chrome浏览器中，首次加载页面时“加载更多”按钮不起作用，但当我单击浏览器上的“后退”按钮和“前进”按钮时，该按钮起作用

我没有得到任何错误。我想不出是什么问题

    <amp-state id="productsState" src="/solrSearchAmp?productCategoryId=14030181&sortResults=customerRating-desc"></amp-state>
<amp-state id="product">
    <script type="application/json">
        {
        "start":20,
        "hasMorePages": true
        }
    </script>
</amp-state>

<amp-list src="/solrSearchAmp?productCategoryId=14030181&sortResults=customerRating-desc" [src]="productsState.items" width="320" height="2000" [height]="productsState.items.length * 200" class="m1">
    <template type="amp-mustache">
    <li class="content navigation ampsiteHeaderNavigation">
        <div class="js_eCommerceThumbNailHolder eCommerceThumbNailHolder">
            <div class="js_swatchProduct">
                <a class="pdpUrl" title="{{name}}" href="{{seoFriendlyUrl}}" id="{{productId}}">
                    <amp-img alt="{{name}}" title="{{name}}" src="http&#58;&#47;&#47;{{productImageSmallUrl}}" class="productThumbnailImage"
                    height="140"
                    width="170">
                    </amp-img>
                </a>
            </div>
        </div>
    </li>
    <li class="content navigation ampsiteHeaderNavigation">
        {{#outOfStock}}
            <div class="stock">Out Of Stock</div>
        {{/outOfStock}}
        <div>
            <a class="eCommerceProductLink pdpUrl" title="{{name}}" href="{{seoFriendlyUrl}}" id="detailLink_{{productId}}"><span>{{name}}</span></a>
        </div>
    </li>
    <li class="content navigation ampsiteHeaderNavigation">
        <div class="js_plpPriceList">
            <span><b>&#x20b9;{{listPrice}}</b></span>
        </div>
    </li>
    <li class="content navigation ampsiteHeaderNavigation">
        <div class="js_plpPriceSavingPercent">
        {{#showPercent}}
            <span>({{youSavePercent}}% off)</span>
        {{/showPercent}}
        </div>
    </li>
    <li class="content navigation ampsiteHeaderNavigation">
        <div class="js_plpPriceOnline">
            <span><b>&#x20b9;{{price}}</b></span>
        </div>
    </li>
    </template>
</amp-list>
<form method="GET" action="/solrSearchAmp?productCategoryId=14030181&sortResults=customerRating-desc"
    action-xhr="/solrSearchAmp?productCategoryId=14030181&sortResults=customerRating-desc"
    target="_top"
    on="submit-success: AMP.setState({
            productsState: {
            items: productsState.items.concat(event.response.items),
            },
            product:{
            start: product.start + 20,
            hasMorePages: event.response.hasMorePages
            }
        });">
    <input type="hidden" name="start" value="20" [value]="product.start">
    <input type="submit"
    value="Show more"
    class="ampstart-btn caps m1 show"
    [class] = "(product.hasMorePages == false ? 'hide' : 'ampstart-btn caps m1 mb3 show')">
</form>

{{{#缺货}
缺货
{{/outOfStock}


₹；{{listPrice}}


{{{showPercent}
（{{youSavePercent}}}折扣%
{{/showPercent}


₹；{{price}}

您必须确保始终访问正确的

开始值。它最初定义为：
productsState.start
。但是，在表单中，您可以通过
product.start
设置并访问它

如果您将
#development=1
附加到URL，您可以通过：
amp.printState（）
调试浏览器控制台中的当前amp状态。您好，正如您所说，我已经检查过，它显示更新的结果，如{“产品”：{“开始”：10，“hasMorePages”：true}，“产品状态”：{“项目”：[{“id”：“140301106_140316586\u SGJ716\u 140301”，“产品id”：“140…………但不在ui中显示