eggnita-react-swipe-deck 是一款 React 组件，用于创建滑动卡片堆的效果，适用于轮播图、展示商品、展示图片等需求，具有交互性和可定制性强的特点，可快速开发出复杂的前端效果。
本文将向大家介绍 eggnita-react-swipe-deck 的使用方法，从安装至基本配置再到高级定制都有详细的讲解，希望对初学 React 的同学有所帮助。
安装
使用 npm 安装 eggnita-react-swipe-deck：
npm install eggnita-react-swipe-deck --save
基础用法
先看一个最简单的示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- ---------------------------
----- ----------- ------- --------------- -
-------- -
------ -
-----------
------------
------------
------------
------------
--
-
-这段代码会渲染出一个包含3个 div 元素的卡片堆，可以横向滑动，但是很不美观。让我们来定制一下。
基本配置
我们可以通过向 SwipeDeck 组件传递参数来定制卡片的样式和交互。
-- -------------------- ---- -------
-- ---
-------- -
----- ------ - -
- --- -- ---------------- -------- --
- --- -- ---------------- --------- --
- --- -- ---------------- ------------- --
- --- -- ---------------- -------- --
- --- -- ---------------- -------- --
--
----- ------ - -
--------- -----
-------------- --
--------- -----
------ -----
--------------- ----
--
------ -
----------
---------------
---------------
------------------ -- -
----
-------------
-------- -------------- ---------------- -------------------- --
-
---------
------
--
--
--
-
-- ---我们定义了一个 slides 数组，其中每个元素包含一个 id 和一个 backgroundColor 属性。还有一个 config 对象，用于定制 SwipeDeck 组件的各种属性。
我们还传递了一个 renderItem 函数，用于定制每个卡片的样式。这个函数的参数是每个卡片的数据，包括通过 slides 传递的数据和计算得到的样式等。
我们将 backgroundColor 设置为 div 的背景色，让每个卡片有不同的颜色。
下面是 config 对象的一些有效属性：
infinite（默认值：false）：是否开启循环模式slidesPerView（默认值：1）：每屏显示多少个卡片autoplay（默认值：false）：是否开启自动播放delay（默认值：3000）：自动播放的时间间隔（毫秒）swipeThreshold（默认值：50）：滑动的阈值，大于这个值才会触发滑动
更多属性可以查看官方文档。
高级定制
如果上述配置无法满足你的需求，你可以通过重写 SwipeDeck 相关方法来进行更高级的定制。
例如，我们想定制开始和结束时的动画效果，我们可以添加以下代码：
-- -------------------- ---- -------
-- ---
---
- --------
- ------ ------------- -------
--
--------------------- -
---------------------- - -- ------- -------- ------- ---
--------------------- ---- -
-- -----
------------ -
---------------------- - ----------- ----- ---
--
---
-
---
- --------
- ------ ------------- -------
--
------------------- -
--------------------- ---- -
-- --------
-------- -------
------------ -
---------------------- - ----------- ----- ---
--
---
-
-------- -
-- ---
-
-- ---我们重写了 animateStart 与 animateEnd 方法，分别用于定制开始和结束时的动画效果。在这里我们使用了 TweenMax 库实现动画效果，你也可以使用其他框架或技术实现。
别忘了在使用 TweenMax 库前，要先引入相关资源：
<!-- 引入 TweenMax --> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script>
还可以自定义触摸事件，定制卡片的移动效果等等操作，具体可以参考官方文档。
示例代码
最后，附上本文所有示例的完整代码供大家参考：
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- ---------------------------
------ - --------- - ---- -------
----- ----------- ------- --------------- -
--------------------- -
---------------------- - -- ------- -------- ------- ---
--------------------- ---- -
-- -----
------------ -
---------------------- - ----------- ----- ---
--
---
-
------------------- -
--------------------- ---- -
-- --------
-------- -------
------------ -
---------------------- - ----------- ----- ---
--
---
-
-------- -
----- ------ - -
- --- -- ---------------- -------- --
- --- -- ---------------- --------- --
- --- -- ---------------- ------------- --
- --- -- ---------------- -------- --
- --- -- ---------------- -------- --
--
----- ------ - -
--------- -----
-------------- --
--------- -----
------ -----
--------------- ----
--
------ -
----------
---------------
---------------
--------------------------------
----------------------------
------------------ -- -
----
-------------
-------- -------------- ---------------- -------------------- --
-
---------
------
--
--
--
-
-
------ ------- ------------希望本文对大家能有所帮助，如果需要更多深入的探究，可以前往官方文档了解更多。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b6151ab1864dac67309