如何在AMP中实现基于单JSON分批加载的无限滚动功能？

需求适配核心思路 #

你不需要依赖amp-nextpage，采用amp-state+amp-list+amp-script的组合即可实现单JSON分批加载的需求，核心逻辑是把全量数据存在本地状态里，每次滚动加载时仅更新要展示的条目数量，不用重复请求JSON文件。

具体实现步骤 #

1. 引入必要组件 #

在页面head中引入对应AMP组件脚本，可从AMP官方文档获取最新引入地址。

2. 配置全量数据与展示状态 #

<!-- 存储全量JSON数据 -->
<amp-state id="allItems" src="/你的全量数据文件路径.json"></amp-state>
<!-- 存储展示配置：当前展示条数、每页条数 -->
<amp-state id="displayConfig">
  <script type="application/json">
    {
      "currentCount": 6,
      "pageSize": 6
    }
  </script>
</amp-state>

3. 实现分批渲染的列表 #

<amp-list
  width="auto"
  height="100vh"
  layout="fixed-height"
  src="你的JSON地址#items.slice(0,6)" // 初始加载前6条，和currentCount初始值对应
  [src]="allItems.items.slice(0, displayConfig.currentCount)"
  reset-on-refresh
>
  <template type="amp-mustache">
    <!-- 你单条列表的渲染模板 -->
    <div class="list-item">
      <h3>{{title}}</h3>
      <p>{{content}}</p>
    </div>
  </template>
</amp-list>

<!-- 滚动触发锚点与加载提示 -->
<div id="load-more-trigger" style="height: 1px;"></div>
<div id="load-tip" style="padding: 20px; text-align: center;">加载中...</div>

4. 实现自动滚动加载逻辑 #

内嵌amp-script实现Intersection Observer监听，直接更新状态而非模拟按钮点击：

<amp-script script="auto-load-script" nodom></amp-script>
<script id="auto-load-script" type="text/plain" target="amp-script">
  const trigger = document.getElementById('load-more-trigger');
  const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const current = AMP.getState('displayConfig.currentCount');
        const pageSize = AMP.getState('displayConfig.pageSize');
        const total = AMP.getState('allItems.items').length;
        if (current < total) {
          // 直接更新展示条数状态，amp-list会自动绑定新数据渲染
          AMP.setState({
            displayConfig: {
              currentCount: current + pageSize
            }
          });
        } else {
          observer.unobserve(trigger);
          document.getElementById('load-tip').textContent = '已加载全部内容';
        }
      }
    })
  }, { rootMargin: '200px' }); // 提前200px触发加载，减少用户等待时间
  observer.observe(trigger);
</script>

问题原因说明 #

你之前模拟点击按钮无效是因为AMP的安全沙箱限制：非用户主动触发的回调中，模拟点击等用户操作会被拦截，避免恶意脚本自动触发交互。直接通过AMP.setState更新状态即可绕开这个限制，也更符合AMP的数据流设计。

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