简介
@xuhaojun/react-swipeable-views 是一个用于 React.js 编写的轻量级的滑动轮播组件。它结构简单,易于使用,支持自定义样式和配置。该组件可用于 HTML 元素及 React 组件上的左右滑动。使用它可以轻松构建精美的轮播图等视觉效果。
安装
可以使用 npm 进行安装:
npm install --save @xuhaojun/react-swipeable-views
使用
在项目中安装组件并按以下方式导入:
import SwipeableViews from '@xuhaojun/react-swipeable-views';
import 语句中的 SwipeableViews 可以是任何你喜欢的名称。但是在本文档中,我们将使用 SwipeableViews。
基本使用
使用 SwipeableViews 按以下方式轻松轮播 HTML 元素。
-- -------------------- ---- ------- ---------------- ----- ----- - ------ ----- ----- - ------ ----- ----- - ------ -----------------
默认情况下,它会在容器中呈现第一个(即 Slide 1)。然后可以通过左右滑动切换每个幻灯片。
完整示例
使用 SwipeableViews 的注册、导入和轮播分类轮播的完整示例:
-- -------------------- ---- ------- ------ ------ - -------- - ---- -------- ------ -------------- ---- ---------------------------------- ----- ------ - - - --- -- ------ ------ -- -- - --- -- ------ ------ -- -- - --- -- ------ ------ -- -- - --- -- ------ ------ -- -- - --- -- ------ ------ -- -- -- ----- ----- - -- ----- -- -- - ---- -------- ---------- --------- ---------------- ---------- ------ -------- -------- ------ --- ------------- ------ -- ----- --- - -- -- - ----- ------------ -------------- - ------------ ----- ----------------- - ----- -- - --------------------- -- ------ - --------------- ------------------ ---------------------------------- ----------------- -- - ------ -------------- ------------- -- --- ----------------- -- -- ------ ------- ----
在该示例中,我们将渲染数组中的幻灯片,并通过 useState 钩子来追踪当前幻灯片的索引。之后,我们使用 onChangeIndex 函数来更新索引并渲染相应的幻灯片。
Props
SwipeableViews 组件接受以下几个 Props:
children: PropTypes.node
SwipeableViews 渲染的幻灯片。可以是用于呈现 HTML,文本或其他 React 组件的任何东西。
-- -------------------- ---- ------- ---------------- ----- ----- - ------ ----- ----- - ------ ----- ----- - ------ -----------------
axis: PropTypes.oneOf(['x', 'x-reverse', 'y', 'y-reverse'])
滑动方向。默认为水平方向。您还可以选择主轴或交叉轴的方向。可以是以下值之一:'x','x-reverse','y','y-reverse'。
-- -------------------- ---- ------- --------------- --------- ----- ----- - ------ ----- ----- - ------ ----- ----- - ------ -----------------
index: PropTypes.number
渲染的幻灯片的索引。默认为 0。
-- -------------------- ---- ------- --------------- ---------- ----- ----- - ------ ----- ----- - ------ ----- ----- - ------ -----------------
onChangeIndex: PropTypes.func
幻灯片索引更改时调用的回调。
-- -------------------- ---- ------- --------------- ------------------ ---------------------------------- ----- ----- - ------ ----- ----- - ------ ----- ----- - ------ -----------------
resistance: PropTypes.bool
当滑动距离超过幻灯片宽度的一半时,轮播停止。默认为 true。
-- -------------------- ---- ------- --------------- ------------------- ----- ----- - ------ ----- ----- - ------ ----- ----- - ------ -----------------
threshold: PropTypes.number
移动距离达到幻灯片宽度乘以此属性之一时,应触发幻灯片更改。默认为 0.3,表示 30 %。
-- -------------------- ---- ------- --------------- ---------------- ----- ----- - ------ ----- ----- - ------ ----- ----- - ------ -----------------
enableMouseEvents: PropTypes.bool
启用鼠标事件。默认为 false。
-- -------------------- ---- ------- --------------- ------------------------- ----- ----- - ------ ----- ----- - ------ ----- ----- - ------ -----------------
总结
使用 @xuhaojun/react-swipeable-views 可以轻松地在 React 项目中构建精美的滑动轮播。组件简单易用,支持自定义样式和配置。通过上文提供的详细教程,您现在已经可以掌握它的使用方式并运用在您的项目中了。祝您的项目更上一层楼!
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6005668481e8991b448e2ad6