在前端开发中，交互和界面设计十分重要。如果你正在开发一个 dating app 或者一个 ecommerce website，使用 swiping 的交互方式能带来优异的用户体验。React-swipe-card 是一个 npm 包，提供 swiping 功能，能够帮助你构建这类应用。
react-swipe-card的优点
React-swipe-card 是一个轻量级组件，它可以被 webpack 或者其他打包工具打包成一个 minified 文件，并且不需要任何依赖。你可以简单地将它融入你的项目，完成交互效果的实现。
步骤一：安装 react-swipe-card
当然首先要确保你已经有了 react 项目，命令行进入到你的项目文件夹，输入下面的命令开始安装 react-swipe-card。
npm install --save react-swipe-card
步骤二：在项目中引入 react-swipe-card
在你需要引用的地方导入 react-swipe-card。
import SwipeCard from 'react-swipe-card';
步骤三：定义一组卡片信息
使用一个数组对象存放每个卡片信息。
const cardList = [
{id: 1, name: 'John', age: 23, location: 'San Francisco, California'},
{id: 2, name: 'Sarah', age: 25, location: 'Boston, Massachusetts'},
{id: 3, name: 'David', age: 27, location: 'Chicago, Illinois'},
{id: 4, name: 'Amy', age: 28, location: 'New York, New York'}
];步骤四：渲染卡片
在 react 组件中使用 SwipeCard, 将 SwipeCard 包裹住你想要放置卡片的地方。该组件会在卡片被拖到任意一边时触发相应的回调函数。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ --------- ---- -------------------
----- -------- - -
---- -- ----- ------- ---- --- --------- ---- ---------- -------------
---- -- ----- -------- ---- --- --------- -------- ----------------
---- -- ----- -------- ---- --- --------- --------- -----------
---- -- ----- ------ ---- --- --------- ---- ----- --- ------
--
----- ------------------ ------- --------- -
------------------ -
-------------
---------- - -
----------------- -
--
------------------ - ------------------------------
-
------------------------ -
----- - ---------------- - - -----------
-- ---------- --- -------- -
-- -- --------- ---- ------ -----
- ---- -- ---------- --- ------- -
-- -- --------- ---- ------ ----
-
--------------- ----------------- ---------------- - - ---
-
-------- -
----- - ---------------- - - -----------
----- ----------- - ---------------------------
------ -
----------
--------------------
----------------------------
------- ------ ---- ------- --- --
-------------------- --------
-
-----------------------------
----------------------------
---------------------------------
------------
--
-
-组件API
- SwipeCard 组件接受一些参数，你可以根据你的需求更改。
| 参数名称 | 参数类型 | 描述 | 默认值 |
|---|---|---|---|
| onSwipe | function | 卡片被 swipe 时的回调函数 | 无 |
| size | object | 卡片的大小 | { width: 400, height: 500 } |
| preventSwipe | string[] | 卡片不可 swipe 的方向 | ['up', 'down'] |
| backgroundColor | string | 卡片的背景颜色 | '#FFFFFF' |
| boxShadow | string | 卡片阴影 | '0px 1px 5px rgba(0,0,0,0.3)' |
结束语
React-swipe-card 是一个非常有用的组件，能简化实现 swiping 交互的过程。它可以快速地帮助你构建出一个优秀的用户界面，并为你的用户带来极佳的体验。现在你可以在你的 react 项目中使用它，并且获得更加流畅的 swiping 体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005728781e8991b448e8bea