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