简介
react-stylish-gallery 是一个 React 图片库组件，它提供了图片的自动分页功能，并支持多种展示效果。本文将介绍如何使用 react-stylish-gallery。
安装
在项目根目录下打开终端，执行以下命令：
npm install react-stylish-gallery
使用方法
- 导入 Gallery 组件和 css 样式
import Gallery from "react-stylish-gallery"; import "react-stylish-gallery/dist/index.css";
- 准备图片数据
const DATA = [
{ src: "https://example.com/1.jpg", alt: "图片 1" },
{ src: "https://example.com/2.jpg", alt: "图片 2" },
{ src: "https://example.com/3.jpg", alt: "图片 3" },
{ src: "https://example.com/4.jpg", alt: "图片 4" },
];- 在 jsx 中使用 Gallery 组件
<Gallery data={DATA} perPage={2} />这个例子中，每页展示两张图片。你还可以通过传递 props 来改变分页方式、图片展示方式等等。
分页方式
默认情况下，react-stylish-gallery 会根据 perPage，将图片分为多个页面进行展示。
infinite 模式：在 infinite 模式下，react-stylish-gallery 会在滚动到页面底部时，自动加载下一页的图片。此时，参数 perPage 将失效。
<Gallery data={DATA} mode="infinite" />- 通过计数器进行翻页：此时，参数 perPage 将会被忽略。你可以使用 react-state，手动控制计数器。
<Gallery data={DATA} mode="counter" />图片展示方式
- grid 模式：默认情况下，react-stylish-gallery 将图片展示为网格状。
<Gallery data={DATA} />- 轮播模式：通过将参数 layout 设为 "carousel"，可以使图片以轮播的形式展示。此时，参数 perPage 将会被忽略。
<Gallery data={DATA} layout="carousel" />其他参数
参数 startIndex：设置起始展示的图片序号。
参数 renderItem：自定义图片展示方式。
参数 onPageChange：翻页时的回调函数。
示例代码
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ------- ---- ------------------------
------ ---------------------------------------
----- ---- - -
- ---- ---------------------------- ---- --- -- --
- ---- ---------------------------- ---- --- -- --
- ---- ---------------------------- ---- --- -- --
- ---- ---------------------------- ---- --- -- --
--
-------- ----- -
----- ------- --------- - ------------
----- ----------------- - ----------- -- -
---------------------------------
--
------ -
-----
--------
-----------
-----------
------------------
--------------------------------
------------------ -- -
-----
---- -------------- -------------- --
------
--
--
------- ----------- -- ---------------------------
------
--
-
------ ------- ----
总结
react-stylish-gallery 是一个非常方便易用的图片库组件，并且支持多种展示方式和分页方式。在实际开发中，根据不同的需求可以选择合适的参数以及设置参数来达到最佳效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562e281e8991b448e06a2