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

Question

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

对于离子3 和 angular 4 应用程序导览或演练，是否有任何可靠的解决方案或插件？

Answer 1

您可以使用intro.js为您的应用添加巡演/步行/入职：

1）使用npm安装intro.js。在你的app目录启动

npm install intro.js --save

2）在app 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标题

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>

就是这样！

实际上这是this answer

的简化/测试版本

A code sample

Intro.js website for documentation

编辑：此程序有效，但Chrome 66有问题。请参阅here并找到jwbeech的解决方案。 无论如何，我引用了jwbeech的解决方案：

问题是附加到root ion-app元素的css属性：contains：strict;。 这似乎是离子应用程序的性能调整，显然在chrome中存在z-index问题。

包含：严格;实际上是包含的简写：布局绘画大小样式，将其更改为：contains：layout size style;足以缓解这个问题。 我找到了一些背景：https://termvader.github.io/css-contain/

以下SCSS应仅在应用introjs提示时允许此更改：

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

可能还有其他布局要求此更改未被上述风格所涵盖，但这是问题的关键。

Answer 2

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