AMP List分页实现点击下一页pageCat变为null如何解决

问题原因 #

pageCat变为null的核心原因是pageCat变量未设置初始默认值：仅在点击分类切换按钮时才会给pageCat赋值，页面首次加载后如果未点击过分类按钮直接点击分页按钮，此时pageCat属于未定义状态，拼接URL时会被自动转为null。

修复方案 #

按以下两步修改即可解决：

• 第一步：新增全局初始状态定义，给pageCat和pageNumber设置默认值
  在现有代码的<amp-state>标签前新增如下状态初始化代码：

  <amp-state id="localState">
    <script type="application/json">
      {
        "pageCat": "events",
        "pageNumber": 1
      }
    </script>
  </amp-state>
  

• 第二步：给URL拼接逻辑添加兜底值，避免极端场景下的空值
  将amp-list和id="page"的amp-state标签的data-amp-bind-src属性修改为如下写法，给pageCat添加兜底值：

  data-amp-bind-src="'/wp-json/posts/v2/category/' + (pageCat || 'events') + '/' + pageNumber"
  

可选优化 #

你可以修改分页按钮的点击逻辑，进一步提升状态稳定性：

<button class="next" 
  data-amp-bind-hidden="page ? pageNumber >= page.items.pageCount : false" 
  on="tap: AMP.setState({ 
    pageNumber: pageNumber ? pageNumber + 1 : 2,
    pageCat: pageCat || 'events'
  })">
  Next
</button>

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