JavaScript中使用Shepherd构建用户导览的方法

一、概述

Shepherd是一个灵活且易于使用的JavaScript库，可用于构建动态用户导览。它允许你使用简单的JavaScript创建导览，而无需编写任何HTML或CSS。本文将介绍如何在JavaScript中使用Shepherd构建用户导览。

二、安装Shepherd

1. 下载Shepherd

要使用Shepherd，可以通过npm安装它。要使用npm，请先在命令行中运行以下命令：

npm install shepherd.js --save

2. 导入Shepherd库

在使用Shepherd之前，必须在您的HTML文件中导入它。导入Shepherd最简单的方法是使用script标签，如下所示：

三、创建Shepherd实例

现在，可以创建一个Shepherd实例并将其绑定到您的页面。为此，请从Shepherd对象中创建一个新的Tour对象，并指定要用于Tour的步骤，如下所示：

 const tour = new Shepherd.Tour({

        defaultStepOptions: {
            scrollTo: { behavior: 'smooth', block: 'center' },
            cancelIcon: {
                enabled: true
            }
        }
    });

在上面的示例中，创建了一个具有一些默认选项的新Tour对象。通过设置scrollTo选项，可以指定当用户移动到步骤时的滚动行为。

四、添加Tour步骤

接下来，可以将步骤添加到Tour对象中。为此，请使用addStep()方法，并在此方法的参数中指定步骤的名称，位置和其他选项，如下所示：

 tour.addStep({

        id: 'intro',
        text: '欢迎来到我的网站',
        attachTo: '.element bottom',
        buttons: [
            {
                text: '下一个',
                action: tour.next
            }
        ]
    });

在上面的示例中，创建了一个新的步骤，它将附加到现有的HTML元素上。还指定了一个按钮，当用户单击该按钮时，Tour将移动到下一个步骤。

五、启动Tour

最后，启动Tour对象，并将它附加到页面中的某个元素上。为此，请使用start()方法并指定要附加Tour的元素，如下所示：

 tour.start();

    

在上面的示例中，Tour对象现已启动，并将附加到默认的HTML元素上。现在可以进行调整，以根据需要更改样式和外观。

六、总结

本文介绍了如何使用Shepherd构建用户导览。 Shepeherd库可使用npm安装，并可通过简单的JavaScript步骤创建动态的用户导览。通过在代码中指定适当的选项和按钮，可以创建自定义的用户导览。