如何转到 AMP 历史记录中的 AMP 页面

问题描述

大家好 我有一个页面 index.html 源代码，我取自 here

我有一个文件 story.html - AMP-story 包含 6 个 AMP 页面

如何在 AMP 历史记录中指定 AMP 页面的路径

我读过这个docs

我试过/stories/knife1/story.html/#page-1

和/stories/knife1/story/#page-1

和/stories/knife1/story.html/page-1

但它不起作用

第一个 AMP 页面始终打开并继续播放

在我的 index.html 中，我有这个代码

<div class="entry-point-container">
                <div class="circular-entry-point">
                  <div class="entry-points">
                    <div class="entry-point-card-container">
                      <img src="img/products/new/knife1/photo_2021-06-05_16-31-08.jpg" style="border-color:#FF6F32">
                      <span class="entry-point-card-title">Q&A with ZOE Newman</span>
                    </div>
                    <div class="entry-point-card-container">
                      <img src="img/products/new/knife1/photo_2021-06-05_16-39-29.jpg" style="border-color:#EF7E31">
                      <span class="entry-point-card-title">24 Hours in New York City</span>
                    </div>
                    <div class="entry-point-card-container">
                      <img src="img/products/new/knife1/photo_2021-06-05_16-39-31.jpg" style="border-color:#EF7E31">
                      <span class="entry-point-card-title">The Next King of the Sea</span>
                    </div>
                    <div class="entry-point-card-container">
                      <img src="img/products/new/knife1/photo_2021-06-05_16-40-09.jpg" style="border-color:#EF7E31">
                      <span class="entry-point-card-title">Spark a Passion for Reading</span>
                    </div>
                    <div class="entry-point-card-container">
                        <img src="img/products/new/knife1/preview1.png" style="border-color:#FF6F32">
                        <span class="entry-point-card-title">Spark a Passion for Reading</span>
                    </div>
                    <div class="entry-point-card-container">
                        <img src="img/products/new/knife1/preview2.png" style="border-color:#EF7E31">
                        <span class="entry-point-card-title">The Next King of the Sea</span>
                      </div>
                  </div>
                </div>
              </div>

{ “行为”： { “自动播放”：假， “pageScroll”：假 },“控制”：[{ "name": "关闭",“位置”：“开始” }] }

我使用这个 JS 代码。也许是这样？

const player = document.body.querySelector("amp-story-player");
const lightBoxEl = document.querySelector(".lightBox");

if (player.isReady) {
  initializeCarousel();
} else {
  player.addEventListener("ready",() => {
    initializeCarousel();
  });
}

function initializeCarousel() {
  const stories = player.getStories();

  const thumbnails = document.querySelectorAll(
    ".entry-point-card-container img"
  );
  console.log(thumbnails);

  thumbnails.forEach((img,idx) => {
    img.addEventListener("click",() => {
      player.show(stories[idx].href);
      player.play();
      lightBoxEl.classList.toggle("show");
    });
  });
}

player.addEventListener("amp-story-player-close",() => {
  player.pause();
  lightBoxEl.classList.toggle("show");
});

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）