前言
在前端开发中，我们经常需要开发移动端应用或网站，这时候就需要用到一些移动端特有的组件，例如 swipeout 组件，用于实现滑动删除等操作。在这里，我们将介绍一个 npm 包——rc-swipeout，用于实现上述效果。
安装
rc-swipeout 是一个 npm 包，安装非常简单，只需在终端运行下列命令：
npm install rc-swipeout --save
这样就完成了 rc-swipeout 的安装。
使用
基本使用
rc-swipeout 的基本使用非常简单，只需要在代码中引入组件，并传入相应的参数即可。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- --------------
------ -------------------------------
------ ---------------
----- ---- - -
-
----- -----
------ - ---------------- ------ ------ ------ --
--
--
----- --------------- ------- --------------- -
-------- -
------ -
---- --------------------
--------- -------------
---- --------------------
-------------
------
-----------
------
--
-
-
------ ------- ----------------在这段代码中，我们通过 import 引入 rc-swipeout 组件，并使用组件包裹了一段普通的 div，同时传入了 right 参数，即右划菜单的内容。
参数说明
rc-swipeout 可以传入的参数非常多，下面我们将介绍其中的几个常用参数：
- left、right：左/右划菜单的内容；
- disabled：设置是否可用；
- prefixCls：设置组件的类名前缀；
- autoClose：设置划动后菜单是否自动关闭；
- onOpen、onClose：左/右划菜单打开/关闭时的回调函数。
更多参数详见：rc-swipeout README
示例说明
下面我们通过实现一个滑动删除的例子，说明 rc-swipeout 的更多用法。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- --------------
------ -------------------------------
------ ---------------
----- ---- - -
-
----- -----
------ - ---------------- ------ ------ ------ --
--
--
----- --------------- ------- --------------- -
------------------ -
-------------
---------- - -
----- -
------
------
------
------
------
------
------
------
------
-------
--
--
-
------------------- -
----- - ---- - - -----------
------------------ ---
--------------- ---- ---
-
-------- -
----- - ---- - - -----------
------ -
---- --------------------
---------------- ------ -- -
---------
-----------
--------
-
----- -----
------ - ---------------- ------ ------ ------ --
-------- -- -- -------------------------
--
--
-
---- --------------------
-------------
------
-----------
---
------
--
-
-
------ ------- ----------------在这段代码中，我们首先定义了一个包含 10 项的数据（list），接着使用 map 方法将每一项数据传入 Swipeout 组件中，并使用 right 参数将删除按钮传入。删除按钮中注册了 onPress 回调函数，在按钮被点击时会调用 handleDelete 方法，从而实现删除相应的数据。
总结
rc-swipeout 是一个用于实现滑动删除等功能的挺好的 npm 包，它拥有丰富的参数和回调函数，可用于满足不同需求的开发。同时，rc-swipeout 还拥有详细的文档和完整的示例代码，这样我们就能够轻松地掌握并使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/89315