AMP-state能否传递多参数？请求中orderBy参数为空求助

我来帮你排查这个问题，核心原因是状态变量初始化缺失和字符串值未正确引用，导致orderBy参数始终为空。下面是具体的解决步骤和修正后的代码：

问题分析 #

1. 状态变量未初始化：你的pageOrderBy变量在初始状态下不存在，AMP无法识别未定义的变量，拼接URL时会直接转为空值。
2. 字符串值未加引号：Next按钮中pageOrderBy: asc的asc没有引号，AMP会把它当作变量名而非字符串值，最终导致参数为空。
3. 状态作用域混乱：原代码中分页变量直接放在全局状态，和amp-state#page的服务器返回数据混在一起，容易引发逻辑冲突。

解决方案 #

1. 初始化分页状态变量

新增一个专门的amp-state来存放分页控制变量，确保pageNumber和pageOrderBy从页面加载时就有默认值：

<amp-state id="pagination">
  <script type="application/json">
    {
      "pageNumber": 1,
      "pageOrderBy": "asc"
    }
  </script>
</amp-state>

2. 修正按钮的状态更新逻辑

给asc加上单引号，明确它是字符串值；同时把状态更新指向pagination对象，避免全局变量混乱：

<div class="nav">
  <button 
    class="prev" 
    on="tap: AMP.setState({ pagination: { pageNumber: pagination.pageNumber - 1 } })"
    [disabled]="pagination.pageNumber <= 1"
  >
    Prev
  </button>
  <button 
    class="next" 
    on="tap: AMP.setState({ 
      pagination: { 
        pageNumber: pagination.pageNumber + 1, 
        pageOrderBy: 'asc' 
      } 
    })"
    [disabled]="pagination.pageNumber >= totalPages"
  >
    Next
  </button>
</div>

3. 同步amp-list和amp-state的数据源

确保初始加载和动态更新的URL都使用pagination中的变量，并且初始URL直接带上默认参数：

<amp-list 
  id="paged-amp-list" 
  layout="fixed-height" 
  height="700" 
  src="{$current_url}?ajax&page=1&orderBy=asc" 
  [src]="'{$current_url}?ajax&page=' + pagination.pageNumber + '&orderBy=' + pagination.pageOrderBy" 
  single-item
>
  <template type="amp-mustache">
    <p class="info">Page {{currentPage}} of {{totalPages}}</p>
    {{ #products }}
    <div class="item">
      <amp-img 
        class="product-image" 
        src="{{ cover.large.url }}" 
        width="{{ cover.large.width }}" 
        height="{{ cover.large.height }}" 
        layout="responsive"
      >
      </amp-img>
    </div>
    {{ /products }}
  </template>
</amp-list>

<!-- 单独存放服务器返回的列表数据，和分页控制变量分离 -->
<amp-state 
  id="pageData" 
  src="{$current_url}?ajax&page=1&orderBy=asc" 
  [src]="'{$current_url}?ajax&page=' + pagination.pageNumber + '&orderBy=' + pagination.pageOrderBy"
>
</amp-state>

额外优化建议 #

• 给按钮添加[disabled]属性，根据当前页码禁用Prev/Next按钮，提升用户体验；
• 服务器端AJAX接口需确保能正确接收page和orderBy参数，并返回包含currentPage、totalPages的完整数据。

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