在 React 中构建一个可拖动的滑块

最新推荐文章于 2024-04-26 22:14:41 发布

pxr007

最新推荐文章于 2024-04-26 22:14:41 发布

阅读量1.4k

点赞数

文章标签： react.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_47967031/article/details/127027600

版权

网站滑块是灵活的用户界面元素，有助于共享多个图像或有效地传达信息，而不会浪费主页上的宝贵空间。

在本文中，我们将演示如何使用react-draggable-slider包在 React 中构建具有可拖动功能的滑块。

跳跃前进：

什么是滑块？
什么是可拖动滑块？
什么是反应可拖动滑块？
React 可拖动滑块演示
- 创建 React 应用程序
- 安装 react-draggable-slider 包
- 创建滑块
- 定义滑块设置
  - data
  - speed
  - easing
  - bgColor
  - showButton
  - buttonText
  - buttonHref
  - buttonTarget

什么是滑块？

网站滑块是一种幻灯片，可显示在单个空间内水平或垂直排列的一系列图像或项目。图像在定义的时间段内单独显示，在从一个图像或项目到下一个图像或项目的变化之间具有过渡效果。

用户可以使用一组导航控件在滑块图像中导航，并且图像或项目也可以循环播放。滑块可以帮助网站以视觉上吸引人的方式展示单个项目，同时还可以节省屏幕空间。

展示客户推荐的网站滑块可能有利于与新潜在客户建立信任和信誉。滑块还可用于显示不同的服务产品或显示产品的多个图像，以便潜在客户可以从不同角度对其进行可视化。

这种类型的 UI 元素对于长页面的滚动内容来说是一个有吸引力的选择。使用滑块，您可以将信息分组到一个位置，为每个项目之间的循环设置舒适的节奏，甚至添加自动播放功能。

什么是可拖动滑块？

可拖动的滑块是手动导航的；用户通过按住并向左或向右拖动当前视图中的项目来从一个项目导航到下一个项目。要查看下一个项目，用户按住当前项目并将其拖到左侧。同样，要查看前一个项目，用户按住当前项目并将其拖动到右侧。

什么是反应可拖动滑块？

要在 React 中创建可拖动的滑块，我们可以从头开始构建它，也可以使用 React 包。

使用 React 包可以提高你的工作效率，因为它会减少你编写代码的时间。但是，这确实意味着您的代码库将依赖于（并且可能容易受到）包的影响。这就是为什么最好选择一个有大型社区贡献的开源包，发现、报告和修复错误，从而保证代码的安全。

超过 20 万开发人员使用 LogRocket 来创造更好的数字体验了解更多 →

对于本文，我们将使用 react-draggable-slider 包。该软件包易于使用，并带有内置的悬停效果。

React 可拖动滑块演示

为了演示在 React 中构建可拖动滑块，我们将设置一个 React 应用程序，安装 react-draggable-slider 包，然后创建滑块并定义滑块设置。

让我们开始吧！

创建 React 应用程序

使用以下命令创建一个 React 应用并为其命名react-draggable-slider：

npx create-react-app react-draggable-slider

现在，在您选择的代码编辑器中打开应用程序。在这个演示中，我将使用 VS Code。

安装 react-draggable-slider 包

在撰写本文时，react-draggable-slider 包与 React v18 不兼容，这是我们在创建 React 应用程序时将获得的 React 版本。

因此，如果我们现在尝试使用 command: 安装滑块包npm i react-draggable-slider，它将不会被安装，并且我们会在终端中收到依赖冲突错误，如下所示：

作为一种解决方法，我们需要将 React 应用程序中的react包和react-dom包的版本降级到 v16，以便与 react-draggable-slider 包兼容。

在创建应用程序时无法指定所需的 React 版本，这就是我们需要在降级版本之前创建应用程序的原因。

来自 LogRocket 的更多精彩文章：

不要错过来自 LogRocket 的精选时事通讯The Replay
使用 React 的 useEffect优化应用程序的性能
在多个 Node 版本之间切换
了解如何使用 AnimXYZ 为您的 React 应用程序制作动画
探索 Tauri，一个用于构建二进制文件的新框架
比较NestJS 与 Express.js
发现TypeScript 领域中使用的流行 ORM

首先，导航到package.json文件并将react包和react-dom包的版本从 v18.1.0 更改为 v16.13.1。

npm install接下来，在终端中运行命令：。这将自动将我们文件夹中的当前版本替换为node_modules我们在文件中指定的新版本package.json。

现在我们准备安装滑块包：

npm i react-draggable-slider

此时，我们不应在终端中看到任何错误。要在浏览器中查看应用程序，请使用以下任一命令运行 React 应用程序：

npm 开始
纱线开始

你会在浏览器中注意到一个关于react-dom/client找不到 React 模块的新错误。发生此错误是因为我们使用的是 React v16。

为了解决这个错误，我们需要index.js通过更改模块的文件路径来对我们的文件进行一些修改。

导航到index.js文件并从以下位置更改导入的文件路径ReactDom：

从 'react-dom/client' 导入 ReactDOM；

至：

从“react-dom”导入 ReactDOM；

接下来，我们需要调整将 React 应用程序渲染到 DOM 的方式。为此，请更改用于呈现 React 应用程序的代码：

const root = ReactDOM.createRoot(document.getElementById("root"));
根.渲染（
  <React.StrictMode>
    <应用 />
  </React.StrictMode>
);

至：

ReactDOM.render(
  <React.StrictMode>
    <应用 />
  </React.StrictMode>,
  document.getElementById("root")
);

现在，返回并在浏览器中查看该应用程序。您应该看到应用程序的内容没有任何错误：

好的，我们已经创建了我们的应用程序；现在是时候创建我们的可拖动滑块了。

创建滑块

要构建滑块，请进入App.js文件并删除当前jsx元素（即Header），因为它不需要。Slider我们将用我们将从中导入的组件替换此元素react-draggable-slider。我们还将一个sliderSettings对象作为道具传递到我们Slider稍后将创建的组件中。

从“react-draggable-slider”导入滑块；

…

<div className="App">
     <滑块滑块设置={滑块设置} />
</div>

接下来，我们将创建一个名为的对象数组projectList。我们将使用这个数组来存储将在滑块的每张幻灯片上显示的项目。

常量项目列表 = [
{
标题：“自然的生命”，
图片：项目1，
描述：
"Praesent quis congue nisi. Vivamus dapibus suscipit magna at imperdiet. Mauris consectetur pharetra metus eu suscipit. Maecenas augue tortor, consequat vitae lacus id, pharetra tempor mauris. Suspendisse sodales commodo erat, non imperdiet nisl scelerisque at. Nulla porttitor gravida di ornare ipsum accumsan bibendum。Morbi ut ante metus。”
},
{
标题：“入水”，
图片：项目2，
描述：
"Duis attellus vitae velit aliquet varius。Fusce luctus libero et ligula tristique lobortis。Vestibulum eu placerat risus, eu semper augue。在 purus sat amet elit pretium viverra 的整数。Suspendisse id fringilla nibh, nec dictum urna。类 aptent taciti socialsqu ad litora Torrent per conubia nostra, per inceptos himenaeos。”
},
{
标题：“高于星星”，
图片：项目3，
描述：
"Praesent quis congue nisi. Vivamus dapibus suscipit magna at imperdiet. Maecenas augue tortor, consequat vitae lacus id, pharetra tempor mauris. Suspendisse sodales commodo erat, non imperdiet nisl scelerisque at. Nulla porttitor gravida diam, in ornare iputsum accumsan bibendum. ante metus。Proin rhoncus magna lectus，nec consequat augue ultricies eu。
},
{
标题：“微型奇迹”，
图片：项目4，
描述：
"Praesent quis congue nisi. Vivamus dapibus suscipit magna at imperdiet. Mauris consectetur pharetra metus eu suscipit. Maecenas augue tortor, consequat vitae lacus id, pharetra tempor mauris. Suspendisse sodales commodo erat, non imperdiet nisl scelerisque at. Nulla porttitor gravida di ornare ipsum accumsan bibendum。Morbi ut ante metus。”
},
{
标题：“历史巨人”，
图片：项目5，
描述：
"Duis attellus vitae velit aliquet varius。Fusce luctus libero et ligula tristique lobortis。Vestibulum eu placerat risus, eu semper augue。在 purus sat amet elit pretium viverra 的整数。Suspendisse id fringilla nibh, nec dictum urna。类 aptent taciti socialsqu ad litora Torrent per conubia nostra, per inceptos himenaeos。”
}
];

PDF文件加密解密方法，三个方法教给你，轻松解锁PDF自由查看！

定义滑块设置

现在，我们将定义我们的滑块设置；这些将被传递到我们的滑块中以配置其行为。

我们将首先创建一个名为的对象，该对象sliderSettings具有以下属性：data、speed、easing、bgColor、showButton、buttonText、buttunHref和buttonTarget。这些道具定义了我们的滑块将如何表现以及如何显示。

数据

data`prop 接受一个数组。对象数组表示将要显示的滑块中的项目或幻灯片的详细信息；在我们的例子中，`projectList`. 每个对象接受三个键值对：`title`、`image`和`description`。默认情况下，`data`prop 设置为空数组，`[].

速度

speedprop 接受一个整数。它确定滑块在拖动到下一个或上一个项目时应该前进的速度（以毫秒为单位）。例如，speed3000 的值等于 3 秒。默认speed属性值为 500 毫秒。

缓和

easingprop 接受一个字符串。有四种可用的GSAP缓动用于动画滑动：power、back、elastic 和 expo。尝试每一个，然后选择你最喜欢的一个。如果没有指定值，easingprop 值将默认为ease浏览器的默认值。

背景颜色

bgColorprop 接受一个字符串。它设置整个滑块的背景颜色并接受 HEX 和 RGB(A) 值。例如，#ffffff或rgba(255, 255, 255, 0.05)。该bgColor道具的默认值为rgba(255, 255, 255, 0.05).

显示按钮

该showButton道具接受一个布尔值。如果设置为true，将为每个项目或幻灯片显示一个按钮；showButton但是，如果prop 设置为，则不会显示任何按钮false。默认情况下，showButtonprop 值设置为true.

按钮文本

buttonTextprop 接受一个字符串。它表示将在每个项目的按钮内显示的文本。默认情况下，该值设置为View case study。

按钮Href

buttonHrefprop 接受一个字符串。该字符串是一个href属性，允许滑块中的每个项目链接到另一个页面，从而使用户能够查看有关该项目的其他详细信息。默认情况下，buttonHrefprop 值设置为 #。

按钮目标

buttonTargetprop 接受一个字符串。当用户点击一个按钮时，这个属性指定链接应该在当前页面还是在不同的页面上打开。该值可以是self或blank。默认情况下，buttonTargetprop 值设置为_blank.

让我们从只传入dataprop 开始，看看我们的滑块会是什么样子。

常量滑块设置 = {
    数据：项目列表，
  };

如果我们在浏览器中查看我们的滑块，我们可以看到它具有前面描述的默认 react-draggable-slider 属性。现在，让我们用我们的首选值传递其余的道具。由于我们没有为easingprop 指定值，因此它将默认为ease.

常量滑块设置 = {
    数据：项目列表，
    速度：3000，
    bgColor: "#070707",
    显示按钮：真，
    buttonText: "查看项目",
    buttonHref: "https://www.example.com",
    按钮目标：“_self”
  };

我们还将在我们的styles.css文件中为我们的 body 和锚标记编写一些样式，这也是我们的号召性用语按钮，然后将文件导入到我们的App.js文件中。

身体 {
  字体系列：无衬线；
  文本对齐：居中；
  背景颜色：#070707；
  颜色：#fff;
}
一条链接，
一个：悬停，
一个：活跃的，
一个：访问{
  颜色：#eee；
  边框顶部：1px 实心 #434141;
  边框底部：3px 实心 #434141;
  边框半径：20px；
}

此时，我们的App.js文件应如下所示：

从“反应”导入反应；
从“react-draggable-slider”导入滑块；
导入“./styles.css”；
从“./imgs/bibi-pace-Hi4fWKU2KSk-unsplash.jpg”导入项目1；
从“./imgs/scott-webb-e3dY8laAQtA-unsplash.jpg”导入项目2；
从“./imgs/alexander-andrews-fsH1KjbdjE8-unsplash.jpg”导入项目3；
从“./imgs/daan-mooij-RyxShs7mG8E-unsplash.jpg”导入项目4；
从“./imgs/damien-santos-M5rim8Yh4LY-unsplash.jpg”导入project5；

导出默认函数 App() {
  常量项目列表 = [
    {
      标题：“自然的生命”，
      图片：项目1，
      描述：
        "Praesent quis congue nisi. Vivamus dapibus suscipit magna at imperdiet. Mauris consectetur pharetra metus eu suscipit. Maecenas augue tortor, consequat vitae lacus id, pharetra tempor mauris. Suspendisse sodales commodo erat, non imperdiet nisl scelerisque at. Nulla porttitor gravida di ornare ipsum accumsan bibendum。Morbi ut ante metus。”
    },
    {
      标题：“入水”，
      图片：项目2，
      描述：
        "Duis attellus vitae velit aliquet varius。Fusce luctus libero et ligula tristique lobortis。Vestibulum eu placerat risus, eu semper augue。在 purus sat amet elit pretium viverra 的整数。Suspendisse id fringilla nibh, nec dictum urna。类 aptent taciti socialsqu ad litora Torrent per conubia nostra, per inceptos himenaeos。”
    },
    {
      标题：“高于星星”，
      图片：项目3，
      描述：
        "Praesent quis congue nisi. Vivamus dapibus suscipit magna at imperdiet. Maecenas augue tortor, consequat vitae lacus id, pharetra tempor mauris. Suspendisse sodales commodo erat, non imperdiet nisl scelerisque at. Nulla porttitor gravida diam, in ornare iputsum accumsan bibendum. ante metus。Proin rhoncus magna lectus，nec consequat augue ultricies eu。
    },
    {
      标题：“微型奇迹”，
      图片：项目4，
      描述：
        "Praesent quis congue nisi. Vivamus dapibus suscipit magna at imperdiet. Mauris consectetur pharetra metus eu suscipit. Maecenas augue tortor, consequat vitae lacus id, pharetra tempor mauris. Suspendisse sodales commodo erat, non imperdiet nisl scelerisque at. Nulla porttitor gravida di ornare ipsum accumsan bibendum。Morbi ut ante metus。”
    },
    {
      标题：“历史巨人”，
      图片：项目5，
      描述：
        "Duis attellus vitae velit aliquet varius。Fusce luctus libero et ligula tristique lobortis。Vestibulum eu placerat risus, eu semper augue。在 purus sat amet elit pretium viverra 的整数。Suspendisse id fringilla nibh, nec dictum urna。类 aptent taciti socialsqu ad litora Torrent per conubia nostra, per inceptos himenaeos。”
    }
  ];

  常量滑块设置 = {
    数据：项目列表，
    速度：3000，
    缓动：“缓和”，
    bgColor: "#070707",
    显示按钮：真，
    buttonText: "查看项目",
    buttonHref: "https://www.example.com",
    按钮目标：“_self”
  };

  返回 （
    <div className="App">
      <滑块滑块设置={滑块设置} />
    </div>
  );
}

这是带有新 CSS 样式的滑块：

您会注意到我们更改了文本颜色，以及页面和滑块的背景颜色。我们还设置了按钮的样式并更改了它的文本值。如果我们使用powerGSAPeasings对滑动进行动画处理，滑动动画将如下所示：

您可以自行尝试其他easing道具选项并选择您最喜欢的道具，并尝试其他道具值。

您还会注意到，当光标移到图像卡上时，图像卡具有很好的悬停效果。这是 react-draggable-slider 的一个很酷的内置功能。

结论

在本教程中，我们展示了使用 react-draggable-slider 包在 React 中创建可拖动滑块是多么容易。我们演示了如何弥补最新版本的 React 的兼容性问题。我们还展示了如何修改 react-draggable-slider 的默认设置以自定义滑块的样式和动画。

随意查看和使用这里的代码。您可能还想查看另一个 React 滑块工具 Swiper，它也是一个非常酷的包。

全面了解生产 React 应用程序

调试 React 应用程序可能很困难，尤其是当用户遇到难以重现的问题时。如果您对监控和跟踪 Redux 状态、自动显示 JavaScript 错误以及跟踪缓慢的网络请求和组件加载时间感兴趣，请尝试 LogRocket。

LogRocket就像一个用于 Web 和移动应用程序的 DVR，几乎可以记录您的 React 应用程序上发生的所有事情。无需猜测问题发生的原因，您可以汇总并报告问题发生时应用程序所处的状态。LogRocket 还监控您的应用程序的性能，并使用客户端 CPU 负载、客户端内存使用情况等指标进行报告。

LogRocket Redux 中间件包为您的用户会话增加了一层额外的可见性。LogRocket 记录来自 Redux 存储的所有操作和状态。

pxr007

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
在 React 中构建一个可拖动的滑块

网站滑块是一种幻灯片，可显示在单个空间内水平或垂直排列的一系列图像或项目。图像在定义的时间段内单独显示，在从一个图像或项目到下一个图像或项目的变化之间具有过渡效果。用户可以使用一组导航控件在滑块图像中导航，并且图像或项目也可以循环播放。滑块可以帮助网站以视觉上吸引人的方式展示单个项目，同时还可以节省屏幕空间。展示客户推荐的网站滑块可能有利于与新潜在客户建立信任和信誉。滑块还可用于显示不同的服务产品或显示产品的多个图像，以便潜在客户可以从不同角度对其进行可视化。
复制链接

扫一扫