0

我正在尝试在一个 AMP 页面上实现多个带有分页的 amp 列表。这是我的放大器列表 HTML：

<amp-list layout="fixed-height" height="450" src="/wp-json/posts/v2/category/events/1" data-amp-bind-src="'/wp-json/posts/v2/category/events/' + events_pageNumber" binding="no" single-item="" reset-on-refresh="" i-amphtml-layout="fixed-height" i-amphtml-binding="">
    <template type="amp-mustache">
        <p class="info">Page {{currentPage}} of {{pageCount}}</p>                         
        <div class="items">
            {{#posts}}
                <div class="item">
                    strong class="title">{{title}}</strong>
                </div>
            {{/posts}}
        </div>
    </template>
    <div>
        <p class="info">Page 1 of 2</p>                       
        <div class="items">
            <div class="item">
                <strong class="title">Stay up-to-date with the one latest tech trends</strong>
            </div>
        </div>
    </div>
</amp-list>
<div class="navigation">
    <button class="prev" data-amp-bind-hidden="events_pageNumber < 2" on="tap: AMP.setState({ events_pageNumber: events_pageNumber - 1 })" i-amphtml-binding="">Previous</button>
    <button class="next" data-amp-bind-hidden="events_page ? events_pageNumber >= events_page.items.pageCount : false" on="tap: AMP.setState({ events_pageNumber: events_pageNumber ? events_pageNumber + 1 : 2 })" i-amphtml-binding="" hidden="">Next</button>
</div>
<amp-state id="events_page" src="/wp-json/posts/v2/category/events/1" data-amp-bind-src="'/wp-json/posts/v2/category/events/' + events_pageNumber" i-amphtml-layout="container" i-amphtml-binding="" hidden="" aria-hidden="true"></amp-state>


<amp-list layout="fixed-height" height="450" src="/wp-json/posts/v2/category/news/1" data-amp-bind-src="'/wp-json/posts/v2/category/news/' + news_pageNumber" binding="no" single-item="" reset-on-refresh="" i-amphtml-layout="fixed-height" i-amphtml-binding="">
    <template type="amp-mustache">
        <p class="info">Page {{currentPage}} of {{pageCount}}</p>                         
        <div class="items">
            {{#posts}}
                <div class="item">
                    strong class="title">{{title}}</strong>
                </div>
            {{/posts}}
        </div>
    </template>
    <div>
        <p class="info">Page 1 of 2</p>                       
        <div class="items">
            <div class="item">
                <strong class="title">Stay up-to-date with the one latest tech trends</strong>
            </div>
        </div>
    </div>
</amp-list>
<div class="navigation">
    <button class="prev" hidden="" data-amp-bind-hidden="news_pageNumber < 2" on="tap: AMP.setState({ news_pageNumber: news_pageNumber - 1 })" i-amphtml-binding="">Previous</button>
    <button class="next" data-amp-bind-hidden="news_page ? news_pageNumber >= news_page.items.pageCount : false" on="tap: AMP.setState({ news_pageNumber: news_pageNumber ? news_pageNumber + 1 : 2 })" i-amphtml-binding="">Next</button>
</div>
<amp-state id="news_page" src="/wp-json/posts/v2/category/news/1" data-amp-bind-src="'/wp-json/posts/v2/category/news/' + news_pageNumber" i-amphtml-layout="container" i-amphtml-binding="" hidden="" aria-hidden="true"></amp-state>

每个列表都有自己的_pageNumber和_page变量。

问题是，在通过单击一个元素[src]属性的下一个/上一个按钮来更改页面时，所有元素都会更改（url 中的最后一个数字更改为null）。如何避免将 setState 应用于所有元素？

4

0 回答 0