使用 React 实现一个轮播组件

前端之家收集整理的这篇文章主要介绍了使用 React 实现一个轮播组件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

tip

React 刚出来不久,组件还比较少,不像 jquery 那样已经有很多现成的插件了,当是就自己写了一个基于 React 的轮播组件,当然只是一个小 demo,刚刚有用 es6 的语法重新改了改,就想着写一个小教程给新手,如何实现一个 React 的小组件。
先放上仓库地址,可以先 clone 来看看代码https://github.com/TongchengQiu/react-slider
react-slider 是一个图片轮播的组件,支持的配置有 图片(必须好不好,要不然轮播毛)、轮播图片的速度、是否自动轮播、自动轮播的时候鼠标放上去是否暂停、自动轮播速度、是否需要前后箭头、是否需要 dot (我不知道怎么表述好,反正意思你懂)。

第一步 需求

首先,写一个组件必须先考虑改组件的需求有哪些,支持的配置需要哪些。
如上已经说了改组件的需求:

  • 轮播的图片

  • 配置轮播图片切换的速度

  • 可配置是否自动轮播

  • 可配置自动轮播的时候鼠标放上去是否暂停

  • 可配置自动轮播的速度

  • 可配置是否需要前后箭头

  • 可配置是否需要 dot (我不知道怎么表述好,反正意思你懂)

这一步先到此为止~~~

第二步 构建项目

这里我们是使用 React 框架,当然也是用它的好搭档 webpack 来构建自动化流程咯~ 原文链接:https://www.f2er.com/react/307196.html

猜你在找的React相关文章