Photoswipe 是一个相册图片预览的轻量级 JavaScript 插件，支持适配不同的视窗大小，可以方便的在移动端和桌面使用。在 React 项目中，我们可以借助于 react-photoswipe-component 这一 npm 包实现快速的集成。
安装
在项目中安装 react-photoswipe-component 包：
npm install react-photoswipe-component
使用示例
下面是一个基础的使用示例：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ------------------- ---- -----------------------------
----- --------- - -- -- -
----- -------- ---------- - ----------------
----- ----------- ------------- - ------------
----- ------- --------- - ----------
-
---- ----------------------------------------
-- ----
-- ---
--
-
---- ----------------------------------------
-- ----
-- ---
--
-
---- ----------------------------------------
-- ----
-- ---
-
---
----- ---------------- - ------- -- -
--------------------
----------------
--
----- ----------- - -- -- -
-----------------
--
------ -
-----
----
----------------- -- -- -
--- --------
---- -------------- ----------- -- -------------------- --
-----
---
-----
--------------------
---------------
---------------------
-------------
----------
------ ---------
--
--
------
--
--
------ ------- ----------此代码创建一个图片相册，包含三张图片，单击每张图片时以全屏形式打开详情页。
API 说明
PhotoSwipeComponent
Props
isOpen(boolean, required): 是否打开全屏详情页。onClose(function, required): 关闭全屏详情页时的回调函数。items(array, required): 图片列表。options(object, optional): PhotoSwipe 实例的配置参数。
Items
items 可以是如下格式之一：
简单数组
简单数组包括一组简单对象，表述图片 URL，尺寸等属性。例如：
-- -------------------- ---- -------
-
-
---- ----------------------------------------
-- ----
-- ---
--
-
---- ----------------------------------------
-- ----
-- ---
--
-
---- ----------------------------------------
-- ----
-- ---
-
--这种格式适合简单的图片数量较小的场景。
详细数组
详细数组包括更为详细的图片信息，例如缩略图 URL，描述等属性。例如：
-- -------------------- ---- -------
-
-
---- -----------------------------------------
----- ----------------------------------------
-- -----
-- ----
------ ------- ---
------------ ---- ----------- -- ------ ---
--
-
---- -----------------------------------------
----- ----------------------------------------
-- -----
-- ----
------ ------- ---
------------ ---- ----------- -- ------ ---
--
-
---- -----------------------------------------
----- ----------------------------------------
-- -----
-- ----
------ ------- ---
------------ ---- ----------- -- ------ ---
-
--这种格式适合图片带有额外信息的场景。
Options
options 结构与 PhotoSwipe 相同，可以调整各种参数。例如，可以使用以下配置调整默认的图片动画效果：
{
index: 0,
transitionDuration: 0.3,
shareEl: false
}总结
在 React 项目中使用 Photoswipe，可以快速创建美观的图片相册，并且可以适配不同的用户端。react-photoswipe-component 为我们提供了方便的使用接口，可以快速上手，并且可高度定制化的配置参数，适应各种项目场景。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005663781e8991b448e22d9