单AMP页实现多组带分页amp-list时setState作用于全部元素如何解决

问题根因 #

AMP 的 amp-bind 机制是全局触发的：只要任意状态变量通过 AMP.setState 更新，页面上所有带 data-amp-bind-* 属性的元素都会重新计算绑定表达式的值。你遇到的 null 问题是因为没有初始化所有分页相关的状态变量，未初始化的变量默认值为 undefined，拼接 URL 时就会生成类似 /xxx/undefined 的地址，被 AMP 处理为 null。

举个例子：你点击事件列表的下一页修改 events_pageNumber 时，新闻列表的 amp-list 绑定的 data-amp-bind-src 会重新计算，此时 news_pageNumber 还是未定义的，就会生成错误地址。

解决步骤 #

1. 初始化所有分页状态变量 #

在页面头部新增全局初始状态，给所有分页页码设置默认值1，保证所有绑定表达式用到的变量始终有有效值：

<amp-state id="paginationInit">
  <script type="application/json">
    {
      "events_pageNumber": 1,
      "news_pageNumber": 1
    }
  </script>
</amp-state>

2. 移除冗余的 amp-state 绑定（可选优化） #

你当前给 id="events_page" 和 id="news_page" 的两个 amp-state 也加了 data-amp-bind-src，属于重复请求逻辑，完全可以去掉。分页总页数可以直接从对应的 amp-list 实例获取，只需给每个 amp-list 加唯一ID即可，比如给事件列表加 id="eventsList"，新闻列表加 id="newsList"，翻页按钮的隐藏判断可以直接写为：

<!-- 事件列表下一页按钮示例 -->
<button class="next" 
  data-amp-bind-hidden="events_pageNumber >= eventsList.items.pageCount" 
  on="tap:AMP.setState({ events_pageNumber: events_pageNumber + 1 })">
  下一页
</button>

调整后可以减少不必要的请求和状态绑定，避免额外的计算开销。

3. 修复模板语法错误 #

你当前的 amp-mustache 模板里的 strong 标签缺少左尖括号，补上即可避免渲染异常：

<strong class="title">{{title}}</strong>

内容的提问来源于stack exchange，提问作者la_petite_kozel