Question

我正在尝试为我的应用程序实现跳房子游览，这是在反应中。跳房子中的多页游览无法正常工作。文档说它适用于sessionStorage和cookies，可能会产生问题。如果这些是导航前第1页中的步骤

var tour = {
      id: "hello-hopscotch",
      steps: [
        {
          title: "Header Page",
          content: "We're going to the next page now...",
          target: "#header",
          placement: "bottom",
          multipage: true,
          onNext: function() {
            window.location = "/#/configuration"
          }
        },
        {
          title: "My content",
          content: "Here is where I put my content.",
          target: document.querySelector("#content p"),
          placement: "bottom"
        }
      ]
    };

，这在第二页

    if (hopscotch.getState() === "hello-hopscotch:1") {
      hopscotch.startTour(
     id: "hello-hopscotch",
      steps: [
        {
          title: "Header Page",
          content: "We're going to the next page now...",
          target: "#header",
          placement: "bottom",
          multipage: true,
          onNext: function() {
            window.location = "/#/configuration"
          }
        },
        {
          title: "Configuration page",
          content: "Here is where I put my content.",
          target: "#configuration",
          placement: "bottom"
        }
      ]

 );
    }

第一页和第二页的步骤应该是什么，以使巡视从一个页面导航到另一个页面。

这不起作用，导航到第二页后，它仍然重复相同的步骤，有时它不会显示任何步骤。我是否可以使用跳房子为我的反应应用程序详细实现多页游览。

Answer 1

据我所知，我也在这里猜测一点，因为我没有看到完整的代码，你没有正确定义游览对象，然后另外没有在第2页正确启动游览，可能也在第1页。那里（至少从纯粹的js角度来看）也是一个语法错误，它可以解释为什么代码不起作用。

第1页上的代码应为：

var tour = {
      id: "hello-hopscotch",
      steps: [
        {
          title: "Header Page",
          content: "We're going to the next page now...",
          target: "#header",
          placement: "bottom",
          multipage: true,
          onNext: function() {
            window.location = "/#/configuration"
          }
        },
        {
          title: "My content",
          content: "Here is where I put my content.",
          target: document.querySelector("#content p"),
          placement: "bottom"
        }
      ]
    };

// Start the tour!
    hopscotch.startTour(tour);

我们在这里做的是定义“游览”，然后我们开始它。请注意，在应该在下一页上的步骤之前的步骤中的multipage：true将改变“状态”如何工作的行为以及它是如何前进的。您始终可以使用hopscotch.getState()

检查状态

第2页的代码应为：

var tour = {
id: "hello-hopscotch",
      steps: [
        {
          title: "Header Page",
          content: "We're going to the next page now...",
          target: "#header",
          placement: "bottom",
          multipage: true,
          onNext: function() {
            window.location = "/#/configuration"
          }
        },
        {
          title: "Configuration page",
          content: "Here is where I put my content.",
          target: "#configuration",
          placement: "bottom"
        }
      ]

 }; //note that you incorrectly had ); here before

if (hopscotch.getState() === "hello-hopscotch:1") {
      hopscotch.startTour(tour);
}

这应该适合你。

跳房子多人游览不起作用

1 个答案: