0

我正在尝试为我在 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"
        }
      ]

 );
    }

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

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

4

1 回答 1

0

据我所见，我也在这里猜测，因为我没有看到完整的代码，您没有正确定义游览对象，然后另外没有在 page2 上正确启动游览，也可能在 page1 上. 那里（至少从纯 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);
}

这应该适合你。

于 2018-05-17T07:40:13.103 回答