react-swipe-away 是一个优秀的 React 库，用于在 Web 应用中实现“划走”的效果。该效果可以用于删除项目、关闭模态框等操作中。
在本文中，我将会介绍这个 npm 包的使用方法，并给出一些示例代码。希望本文对广大前端开发者有所启发。
安装
通过 npm 安装 react-swipe-away：
npm install react-swipe-away --save
或者通过 yarn：
yarn add react-swipe-away
使用
首先，我们需要引入 react-swipe-away：
import SwipeAway from 'react-swipe-away';
基本用法
我们可以使用 SwipeAway 组件，将一些元素包裹起来，从而实现“划走”效果：
<SwipeAway onSwipeAway={() => alert('swiped away!')}>
<div> Swipe me away ! </div>
</SwipeAway>通过 onSwipeAway 属性，我们可以在用户“划走”元素时触发某些操作。在这个例子中，我使用了 alert 方法来弹出一个提示框。
自定义样式
我们可以通过 style 属性来为 SwipeAway 组件自定义样式：
-- -------------------- ---- -------
----------
--------
---------------- --------
---------- ---- --- ---- ---------
------------- ---
-------- ---
--
-
----- ----- -- ---- - ------
------------在这个例子中，我将 SwipeAway 组件的背景色、阴影、圆角和内边距进行了自定义。
可见区域
我们可以通过 visible 属性指定可见的区域。在这个区域之外的元素可以被“划走”：
<SwipeAway visible={200}>
<div> Swipe me away ! </div>
</SwipeAway>在这个例子中，我指定了可见区域的宽度为 200 像素。
更多属性
SwipeAway 还有许多其他的属性，比如：
- onSwipeAwayStart：当用户开始“划走”元素时触发。
- onSwipeAwayEnd： 当用户“划走”元素结束时触发。
- innerRef：得到 SwipeAway 组件的引用。
- delay：设置滑动延迟的时间。
更多属性请阅读官方文档。
示例代码
以下是一个简单的示例代码，展示了如何使用 SwipeAway 组件。在这个示例中，我们将一个 div 元素包裹在 SwipeAway 组件中，当用户将 div 元素“划走”时，会自动将元素删除：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ --------- ---- -------------------
-------- --------------- -
----- ------- --------- - ------------ -- -- -- ----
------ -
---- ------------------------- -------- ------ ------ ------- -- ----- ---
----------------- -- -
----------
----------
--------------- -- -
---------------- -- ---------------- -- - --- -------
--
-
----
--------
---------------- --------
-------- ----- ------
------- ---- ----- ------
------------- ------
------------- -------
---------- ---------
--------- -------
------- ----------
--
-
------
------
------------
---
------
--
-
------ ------- --------------在这个示例中，我们创建了一个 SwipeToDelete 组件，它是一个函数式组件。我们使用 useState 钩子来维护删除元素的状态。在 JSX 中，我们使用 map 方法遍历 items 数组，并为每个元素创建一个 SwipeAway 组件和一个带有样式的 div 元素。当用户将 div 元素“划走”时，我们在 onSwipeAway 回调函数中删除这个元素。
结论
我们介绍了 react-swipe-away 这个 npm 包的使用方法，并给出了一些示例代码。该库可以用于各种 Web 应用中，在删除项目、关闭模态框等场景中非常有用。希望这篇文章对你有所启发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055b7f81e8991b448d90d3