react-page-guide v1.0.4

1. 安装

通过 yarn/npm 安装 react-page-guide

yarn add react-page-guide -S
npm install react-page-guide -S

2. 使用

react-page-guide 的用法和 driver.js 基本保持一致

import createPageGuide from 'react-page-guide';

const driver = createPageGuide(props, options);

driver.start();

1.props 包含一下参数：

2.optinos 参数和 driver.js 的构造函数传参一致，可以覆盖 props 中的 onPrev/onNext/onFinish

props 中的 onPrev/onNext 与 options 中的不同，加上了计数功能

3. 例子

1.例1

页面代码如下所示，这就是一个布局非常简单的页面，通过按钮触发对 top、middle、bottom 三块区域的引导

2.例2

事实上例1是比较顺利的场景，大多数场景下可能需要我们做一些额外的工作来保证引导组件的正常进行。相对于例1中页面滚动处于 body 的位置，例2中固定了 body 为浏览器可视区域的高度禁止滚动，滚动区域被放在了名为 wrapper 的 div 上。此时我们不仅需要在开始时对重置初始位置；还要在进行“下一步”、“上一步”动作中间进行阻断，对引导的位置进行校正。

以下 gif 中是校正前的表现

校正后的表现

3.例3

例3也做了一些额外的处理，但又有些不同于例2。首先在开始前先禁止了 middle 区域的滚动事件，其后在操作“上一步”回到 middle 所在引导块时又对 container 进行了操作。

校正前

校正后

4. 造成使用异常的原因

造成使用异常的原因主要是 driver.js 中代码逻辑无法覆盖实际场景。 首先可以从 onHighlighted 函数入手，首先该函数内调用了 isInView 函数判断当前高亮区域是否在可视区域。

重点就是 isInView 函数，通过计算高亮节点的位置与当前 window 对象包含区域和滚动偏移量对比判断当前节点是否在可视区域，若在则进行下一步，若不在则通过 bringInView 函数进行调整，这一步其实就会存在问题。比如例2中，虽然 middle 确实是在 window 的可视区域内，但实际上因为 middle 父级的可视区域高度只有 250px，导致 middle 无法正确展示。正确逻辑应该是通过 middle 父级对比判断 middle 是否在可视区域内。同样的问题在 github issue 中也提到了。

showPopver、showStage 两个方法中都调用了 getCalculatedPosition 方法，该方法通过 window/document/body 对象计算位置信息，可能也会导致页面展示与预期效果不一致问题，具体解决措施还需要针对场景去实施。

掘金文章链接