如何在离子3中实现漫游或巡演？

Question

我想在我的ionic3应用程序中实现App tour,如下图所示

是否有任何值得信赖的解决方案或插件适用于App tour或者为离子3和角4进行漫游？

Answer 1

您可以使用 intro.js 向您的应用程序添加游览/walktrought/onboarding：

1) 使用 npm 安装 intro.js。在您的应用程序目录中启动

npm install intro.js --save

2) 在你的 app index.html 中导入库

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.7.0/introjs.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.7.0/intro.min.js"></script>

3）创建一个页面并放入page.ts header

import introJs from 'intro.js/intro.js';

4）放入homepage.ts代码

ngAfterViewInit(): void {
  this.intro();
}

intro() {
  let intro = introJs.introJs();
  intro.setOptions({
  steps: [
    {
      intro: "Hello world!"
    },
    {
      element: '#step1',
      intro: "This is a tooltip.",
      position: 'bottom'

    },
    {
      element: '#step2',
      intro: "Ok, wasn't that fun?",
      position: 'bottom'
    }
  ]
  });
  intro.start();
}

3）放入你的page.html

<ion-content padding>
    <p id="step1">First step</p>
    <p id="step2">Second Step  </p>
</ion-content>

就是这样！

实际上，这是此答案的简化/测试版本

代码示例

Intro.js 文档网站

编辑：此过程有效，但 chrome 66 存在问题。请参阅此处并通过 jwbeech 找到解决方案。无论如何，我引用了 jwbeech 的解决方案：

问题是附加到根 ion-app 元素的 css 属性：包含：严格；。这似乎是对 ionic 应用程序的性能调整，该应用程序在 chrome 中显然存在 z-index 问题。

包含：严格；实际上是contain: layout paint size style的简写，将其更改为： contains: layout size style; 足以缓解问题。我发现的一些背景：https : //termvader.github.io/css-contain/

仅当应用了 introjs 提示时，以下 SCSS 才应允许进行此更改：

ion-app, ion-nav, ion-tab, ion-tabs, .app-root, .ion-page{
    &.introjs-fixParent{
        contain: layout size style;
    }
}

可能还有其他布局需要此更改，但上述样式未涵盖，但这就是问题的关键。

Answer 2

您应该向每个要使用 css 属性 display:absolute 解释其角色的菜单添加一个徽章，并且其相对容器将是该页面的全部内容。它的算法是：当用户接受游览选项时，第一个标签将显示数字及其解释标签，然后如果用户单击第一个菜单项，它将被添加到本地存储中，以通知应用程序用户已阅读此信息，并且第二个和第三个依此类推...当用户读取每个信息时，它将永远隐藏，因此它将具有布尔值。