npm 包 @xuhaojun/react-swipeable-views 使用教程

阅读时长 6 分钟读完

简介

@xuhaojun/react-swipeable-views 是一个用于 React.js 编写的轻量级的滑动轮播组件。它结构简单,易于使用,支持自定义样式和配置。该组件可用于 HTML 元素及 React 组件上的左右滑动。使用它可以轻松构建精美的轮播图等视觉效果。

安装

可以使用 npm 进行安装:

使用

在项目中安装组件并按以下方式导入:

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

纠错
反馈