跳房子多页游览不起作用答案

【问题标题】：Hopscotch multipage tour does not work跳房子多页游览不起作用
【发布时间】：2018-02-11 14:24:59
【问题描述】：

我正在尝试为我在 react 中的应用程序实现 hopscotch tour。hopscotch 中的多页游览无法正常工作。文档说它可以与 sessionStorage 和 cookie 一起使用，这可能是一个问题。如果这些是导航前的第 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"
        }
      ]

 );
    }

第一页和第二页中的步骤究竟应该是什么，才能使导览从一个页面导航到另一个页面。

这不起作用，导航到第二页后它仍然重复相同的步骤，有时它不显示任何步骤。我可以在我的 react 应用程序中使用 hopscotch 详细实现多页巡回吗？

【问题讨论】：

标签： reactjs navigation multipage hopscotch

【解决方案1】：

据我所见，由于我没有看到完整的代码，我也在这里猜测了一下，您没有正确定义游览对象，然后另外没有在 page2 上正确启动游览，并且可能也在第 1 页。那里（至少从纯 js 的角度来看）还有一个语法错误，可以解释为什么代码不起作用。

page1 上的代码应该是：

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()检查状态

page2 上的代码应该是：

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);
}

这应该适合你。

【讨论】：