npm 包 wipetouch 使用教程

前言

wipetouch 是一个能够实现触摸滑动页面时的涂抹效果的 npm 包。这个 npm 包能够提供我们一个更加直观的用户交互体验，吸引用户的视线，提升网站的用户体验。

安装 wipetouch

在使用 wipetouch 之前，需要先安装 wipetouch 包。可以使用 npm 安装 wipetouch，安装步骤如下：

在终端上输入以下命令：

npm install wipetouch --save

该命令会将 wipetouch 包安装在当前目录下的 node_modules 目录中，同时在 package.json 文件中添加 wipetouch 依赖。

使用 wipetouch

在完成安装过程后，需要在项目中引入 wipetouch 包。示例代码如下：

-- -------------------- ---- -------
------ --------- ---- -----------

--- --------- - --- ----------------------- -
    --------- - ---
    ------- - --------
    ----------- - -------
    ------------------ - ------------------
    ---- - -----------
---

--------------------- ------------------
    ------------------- - -----
---

接下来，我将对 wipetouch 的使用方法进行详细介绍：

初始化 wipetouch

在使用 wipetouch 之前，需要先初始化 wipetouch 。初始化的方式是通过实例化 WipeTouch 类，代码如下：

let wipetouch = new WipeTouch('.container', options);

其中，.container 代表要添加涂抹效果的父容器，options 代表 wipetouch 的配置项。

wipetouch 配置项

wipetouch 的配置项可以帮助我们更好地控制涂抹效果的展示。下面是 wipetouch 的配置项参数：

wipetouch 事件

在 wipetouch 中，我们可以监听相关事件，比如监听清除进度。示例代码如下：

wipetouch.on('clean', function(percent){
    console.log(percent + '%');
});

其中，percent 代表清除进度的百分比。

wipetouch 方法

wipetouch 还提供了多种方法，可以帮助我们更好控制涂抹效果的展示以及其它相关操作。这些方法如下：

示例代码

下面是示例代码，它可以通过运行 npm 包 wipetouch 来展示涂抹效果（假设已通过 npm install wipetouch --save 安装 wipetouch 包）：

-- -------------------- ---- -------
-------
    -----------
        ------------
        -------------
        ----------- ---------- --------- ------ - ------
    -
--------

---- ------------------------

--------
    ------ --------- ---- -----------

    --- --------- - --- ----------------------- -
        --------- - ---
        ------- - --------
        ----------- - -------
        ------------------ - ------------------
        ---- - -----------
    ---

    --------------------- ------------------
        ------------------- - -----
    ---
---------

以上示例代码中，我们首先在样式表中设置了一个类名为 'container' 的容器，然后在 script 标签内使用 wipetouch 创建了一个新的实例，配置项内包含涂抹效果的相关配置。涂抹效果会被添加到容器中。

总结

wipetouch 是一个很好用的 npm 包，能够提供非常漂亮的交互体验。只需要一个简单的安装过程，我们就可以轻松地实现在网页中添加涂抹效果。希望这篇介绍可以帮助你更好地使用 wipetouch。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671108dd3466f61ffe2f8