@types/react-swipeable 是一个为 React-Swipeable 提供类型定义的 npm 包。React-Swipeable 是一个基于 React 实现的轻量级触摸滑动组件库，可以轻松地实现手机屏幕的滑动交互操作。本篇文章将介绍如何使用 @types/react-swipeable 构建基于 React-Swipeable 的触摸滑动组件。
安装
使用 npm 或 yarn 安装 @types/react-swipeable ：
npm install @types/react-swipeable # OR yarn add @types/react-swipeable
基本用法
接下来我们将创建一个简单的拖动组件，通过鼠标或手指拖动可以改变其位置。首先，我们需要使用 React-Swipeable 的 Swipeable 组件包裹我们的拖动组件。Swipeable 具有以下属性：
- onSwiped ( direction: "Up" | "Down" | "Left" | "Right", event: Event ): 滑动结束时触发的函数，可以获取滑动方向和触发事件对象。
- onSwiping ( event: Event, deltaX: number, deltaY: number ): 滑动过程中触发的函数，可以获取事件对象以及 X 和 Y 轴滑动距离。
- preventDefaultTouchmoveEvent ( preventDefault?: boolean ): 是否阻止默认的滑动事件。默认值为
true。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - --------- - ---- ------------------
----- ------------------- -------- - -- -- -
----- ---------- ------------ - ---------- -- -- -- - ---
----- ---------- ------------ - ----------------
----- ---------- - -- -- -------------------
----- ---------- - --- --------------------------------- -- -
-- ----------- -------
-------------
-- ----------
-- ----------
---
-------------------
--
------ -
----------
------------- -- ------------------
------------ -- -------------------
------------------------------------
-
----
------------------------
----------------------
--------
--------- -----------
----- -----------
---- -----------
--
-
---- ---
------
------------
--
--
------ ------- -------------------这时候就可以通过鼠标或手指拖动组件，在拖动的时候可以实时获取到鼠标或手指的位置。值得注意的是，在 Swipeable 组件上关于阻止默认事件的参数 preventDefaultTouchmoveEvent 进行了修改，因为在拖动时需要阻止默认的滑动事件，否则会对拖动效果造成影响。
自定义滑动计算
我们可以通过自定义 Swipeable 的 delta 属性来决定触发滑动操作的最小滑动距离。默认情况下，Swipeable 会根据浏览器的 DPI 自动计算一个最小滑动距离，但我们也可以自己设置。我们可以通过设置 Swipeable 的 trackMouse 属性，手动控制滑动距离，在 onSwiping 事件中计算当前滑动位置与起始位置的差值：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - --------- - ---- ------------------
----- ------------------ -------- - -- -- -
----- -------- ---------- - ------------
----- ---------- ------------ - ----------------
----- ---------- - -- -- -------------------
----- ---------- - ------- ------- ------ ----------- -- -
-- ----------- -------
-----------------
-----------------------
--
----- ------------- - -- -- ------------------
------ -
----------
----------
-------------------------
---------------------
------------------------------------
----------
-------------- ----------- ------- ------- --
------------------ --------------
-
---------------------
-
---- -------- ---------- ------------------------- ---
----- ---
------
------------
--
--
------ ------- ------------------这样做就能够自定义滑动距离的计算方式了。
结语
@types/react-swipeable 使得基于 React-Swipeable 的组件开发更加方便。通过本文介绍的相关配置就能够轻松地实现开发高质量的触摸滑动组件。
完整代码示例可以在 Github 上查看。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedc199b5cbfe1ea0611e5b