使用 React 實(shí)現(xiàn)一個(gè)輪播組件

banana_pi 發(fā)布于2019-08-19 17:37 / 2678人閱讀

摘要：對于組件，我們需要一個(gè)輪播項(xiàng)總數(shù)目來決定顯示幾個(gè)，還需要一個(gè)屬性來判斷哪個(gè)對應(yīng)當(dāng)前顯示的輪播項(xiàng)，點(diǎn)擊每個(gè)的是否需要一個(gè)回調(diào)函數(shù)來做出響應(yīng)。每個(gè)綁定的函數(shù)還需要計(jì)算需要向前或者向后移動多少個(gè)輪播項(xiàng)，然后回調(diào)函數(shù)。

tip

React 剛出來不久，組件還比較少，不像 jquery 那樣已經(jīng)有很多現(xiàn)成的插件了，當(dāng)是就自己寫了一個(gè)基于 React 的輪播組件，當(dāng)然只是一個(gè)小 demo，剛剛有用 es6 的語法重新改了改，就想著寫一個(gè)小教程給新手，如何實(shí)現(xiàn)一個(gè) React 的小組件。
先放上倉庫地址，可以先 clone 來看看代碼：https://github.com/TongchengQiu/react-slider。
react-slider 是一個(gè)圖片輪播的組件，支持的配置有圖片（必須好不好，要不然輪播毛）、輪播圖片的速度、是否自動輪播、自動輪播的時(shí)候鼠標(biāo)放上去是否暫停、自動輪播速度、是否需要前后箭頭、是否需要 dot （我不知道怎么表述好，反正意思你懂）。

第一步需求

首先，寫一個(gè)組件必須先考慮改組件的需求有哪些，支持的配置需要哪些。
如上已經(jīng)說了改組件的需求：

輪播的圖片

配置輪播圖片切換的速度

可配置是否自動輪播

可配置自動輪播的時(shí)候鼠標(biāo)放上去是否暫停

可配置自動輪播的速度

可配置是否需要前后箭頭

可配置是否需要 dot （我不知道怎么表述好，反正意思你懂）

這一步先到此為止～～～

第二步構(gòu)建項(xiàng)目

這里我們是使用 React 框架，當(dāng)然也是用它的好搭檔 webpack 來構(gòu)建自動化流程咯～?
不懂 webpack 的配置可以看我的博客關(guān)于 webpack 使用的文章，謝謝～?
這是項(xiàng)目開發(fā)目錄的文件結(jié)構(gòu)：

src
├── Slider              #Slider組件
|   |
|   ├──SliderItem          
|   |   ├──SliderItem.jsx
|   |   └──SliderItem.scss
|   |
|   ├──SliderDots        
|   |   ├──SliderItem.jsx
|   |   └──SliderItem.scss
|   |
|   ├──SliderArrows         
|   |   ├──SliderItem.jsx
|   |   └──SliderItem.scss
|   |
|   ├──Slider.jsx         
|   |
|   └──Slider.scss
|
├──images              #存放demo用的圖片文件
|
└── index.js           #demo的入口文件

看目錄結(jié)構(gòu)我們應(yīng)該明白了，我們主要關(guān)注 Slider 文件夾。

第三步基于需求的開發(fā)

這里我們開發(fā)組件的模式是按照需求驅(qū)動型，回到第一步的需求，我們先不管組件內(nèi)代碼，先寫出我們想怎么樣配置使用組件：

// index.js
import React from "react";
import { render } from "react-dom";
import Slider from "./Slider/Slider";

const IMAGE_DATA = [
  {
    src: require("./images/demo1.jpg"),
    alt: "images-1",
  },
  {
    src: require("./images/demo2.jpg"),
    alt: "images-2",
  },
  {
    src: require("./images/demo3.jpg"),
    alt: "images-3",
  },
];

render(
  ,
  document.getElementById("root")
);

可以看到，在使用 Slider 組件的時(shí)候，根據(jù)需求，我們可以傳入這些屬性來配置組件。
一個(gè) items 數(shù)組，決定了需要輪播的內(nèi)容，items 里面每個(gè)元素都是一個(gè)對象，有 src 和 alt 屬性，分別是輪播圖片的 src 地址和 alt 內(nèi)容；
speed 是圖片切換的時(shí)候的速度時(shí)間，需要配置一個(gè) number 類型的數(shù)據(jù)，決定時(shí)間是幾秒；
autoplay 是配置是否需要自動輪播，是一個(gè)布爾值；
delay 是在需要自動輪播的時(shí)候，每張圖片停留的時(shí)間，一個(gè) number 值；
pause 是在需要自動輪播的時(shí)候，鼠標(biāo)停留在圖片上，是否暫停輪播，是一個(gè)布爾值；
dots 是配置是否需要輪播下面的小點(diǎn)；
arrows 是配置是否需要輪播的前后箭頭；

第四步編寫組件

首先我們來考慮一下需要多少個(gè)組件，最外層的 Slider 組件是毋庸置疑的了。
根據(jù)需求我們可以分出一個(gè) SliderItem 組件，一個(gè) SliderDots，一個(gè) SliderArrows 組件，分別是輪播每個(gè)圖片的item，輪播下面dots的組件，左右箭頭組件。
我們先來編寫每個(gè)小組件，組件是對外封閉獨(dú)立的，所以它只需要對外暴漏屬性的配置即可。

SliderItem

因?yàn)?SliderItem 是展示輪播圖片的每個(gè)內(nèi)容的，所以它需要的屬性有，src 和 alt，因?yàn)橹拔覀円呀?jīng)把每個(gè)輪播項(xiàng)寫成一個(gè)對象了，所以把 src 和 alt 作為屬性放在 item，我們只需要一個(gè) item 屬性即可；它還需要決定它在父組件中大小，因?yàn)樵谖词褂媒M件的時(shí)候我們是不知道輪播項(xiàng)的數(shù)目的，所以它的寬度需要根據(jù)父組件傳給它c(diǎn)ount（圖片數(shù)目）來計(jì)算。
所以它需要的屬性有：

item (有 src 和 alt 屬性)

count （輪播項(xiàng)總數(shù)目，計(jì)算每個(gè)輪播項(xiàng)的寬度）

import React, { Component } from "react";

export default class SliderItem extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    let { count, item } = this.props;
    let width = 100 / count + "%";
    return (
      
        
      
    );
  }
}

let width = 100 / count + "%"; 即是計(jì)算它占父組件的寬度百分比。

SliderDots

對于 SliderDots 組件，我們需要一個(gè) count（輪播項(xiàng)總數(shù)目）來決定顯示幾個(gè) dot，還需要一個(gè) nowLocal 屬性來判斷哪個(gè) dot 對應(yīng)當(dāng)前顯示的輪播項(xiàng)，點(diǎn)擊每個(gè) dot 的是否需要一個(gè)回調(diào)函數(shù) turn 來做出響應(yīng)。
所以它需要的屬性有：

count（輪播項(xiàng)總數(shù)目）

nowLocal（當(dāng)前的輪播項(xiàng)）

turn（點(diǎn)擊 dot 回調(diào)函數(shù)）

import React, { Component } from "react";

export default class SliderDots extends Component {
  constructor(props) {
    super(props);
  }

  handleDotClick(i) {
    var option = i - this.props.nowLocal;
    this.props.turn(option);
  }

  render() {
    let dotNodes = [];
    let { count, nowLocal } = this.props;
    for(let i = 0; i < count; i++) {
      dotNodes[i] = (
        
        
      );
    }
    return (
      
        {dotNodes}
      
    );
  }
}

代碼可以看出，我們用 for 循環(huán)根據(jù) count 來決定了需要多少個(gè) dot，然后在每個(gè) dot 綁定函數(shù)傳入一個(gè) i 值，并且如果這個(gè) dot 對于當(dāng)前顯示的輪播項(xiàng)，就多加一個(gè)class slider-dot-selected。
每個(gè) dot click 綁定的函數(shù)還需要計(jì)算需要向前或者向后移動多少個(gè)輪播項(xiàng)，然后回調(diào) turn 函數(shù)。

SliderArrows

對于 SliderArrows 組件，我們只需要一個(gè) turn 函數(shù)作出回調(diào)。
廢話不多少，代碼如下：

import React, { Component } from "react";

export default class SliderArrows extends Component {
  constructor(props) {
    super(props);
  }

  handleArrowClick(option) {
    this.props.turn(option);
  }

  render() {
    return (
      
        
          <
        
        
          >
        
      
    );
  }
}

這個(gè)組件下面有兩個(gè)箭頭，分別是向前和向后，回調(diào)的 turn 是 1 和－1。

Slider 組件

import React, { Component } from "react";

require("./Slider.scss");

import SliderItem from "./SliderItem/SliderItem";
import SliderDots from "./SliderDots/SliderDots";
import SliderArrows from "./SliderArrows/SliderArrows";

export default class Slider extends Component {
  constructor(props) {
    super(props);
    this.state = {
      nowLocal: 0,
    };
  }

  // 向前向后多少
  turn(n) {
    var _n = this.state.nowLocal + n;
    if(_n < 0) {
      _n = _n + this.props.items.length;
    }
    if(_n >= this.props.items.length) {
      _n = _n - this.props.items.length;
    }
    this.setState({nowLocal: _n});
  }

  // 開始自動輪播
  goPlay() {
    if(this.props.autoplay) {
      this.autoPlayFlag = setInterval(() => {
        this.turn(1);
      }, this.props.delay * 1000);
    }
  }

  // 暫停自動輪播
  pausePlay() {
    clearInterval(this.autoPlayFlag);
  }

  componentDidMount() {
    this.goPlay();
  }

  render() {
    let count = this.props.items.length;

    let itemNodes = this.props.items.map((item, idx) => {
      return ;
    });

    let arrowsNode = ;

    let dotsNode = ;

    return (
      
          
              {itemNodes}
          
          {this.props.arrows?arrowsNode:null}
          {this.props.dots?dotsNode:null}
        
      );
  }
}

Slider.defaultProps = {
  speed: 1,
  delay: 2,
  pause: true,
  autoplay: true,
  dots: true,
  arrows: true,
  items: [],
};
Slider.autoPlayFlag = null;

在這里我們先是 import 依賴，以及需要的子組件。

Slider 有一個(gè)狀態(tài) nowLocal，是表明當(dāng)前輪播的第幾項(xiàng)。

前面一直講 turn 函數(shù)，我們就先分析一下這個(gè)函數(shù)：

turn(n) {
  console.log();
  var _n = this.state.nowLocal + n;
  if(_n < 0) {
    _n = _n + this.props.items.length;
  }
  if(_n >= this.props.items.length) {
    _n = _n - this.props.items.length;
  }
  this.setState({nowLocal: _n});
}

它傳入一個(gè) 參數(shù) n ，決定向前或者向后移動多少個(gè)輪播項(xiàng)，向前和向后分別對于－和＋。
turn 函數(shù)內(nèi)，聲明一個(gè) _n 變量表示下一個(gè)輪播的第幾項(xiàng)。
如果 _n 小于 0 ，那當(dāng)然是不行的，所以就會讓 _n 變成最后一項(xiàng)；
如果 _n 大于 items 的長度，那當(dāng)然也是不行的，所以就會讓 _n 變成第一項(xiàng)；
最后改變狀態(tài) nowLocal 等于 _n。

下面是一個(gè)開始自動輪播的函數(shù) goPlay：

goPlay() {
  if(this.props.autoplay) {
    this.autoPlayFlag = setInterval(() => {
      this.turn(1);
    }, this.props.delay * 1000);
  }
}

如果 autoplay 是 true，則執(zhí)行 setInterval 來自動調(diào)用 this.turn(1) 向前移動輪播項(xiàng)，this.props.delay * 1000就是根據(jù)配置的 delay 來決定多久移動一次。
這里我們需要一個(gè) autoPlayFlag 參數(shù)來保存 setInterval 的回調(diào)，用來在鼠標(biāo)停放在圖片上停止自動輪播，我們把這個(gè) autoPlayFlag 作為組件的一個(gè)屬性來保存。

Slider.autoPlayFlag = null;

然后在組件初始化 componentDidMount 的時(shí)候調(diào)用這個(gè)函數(shù)：

componentDidMount() {
  this.goPlay();
}

我們還需要一個(gè) pausePlay 函數(shù)來暫停自動輪播。

pausePlay() {
  clearInterval(this.autoPlayFlag);
}

最后就是 render 了，根據(jù)屬性配置哪些函數(shù)和組件需要～

默認(rèn)屬性，這個(gè)是需要的，在使用屬性的時(shí)候如果忘了一些配置項(xiàng)也不會出錯(cuò)。

Slider.defaultProps = {
  speed: 1,
  delay: 2,
  pause: true,
  autoplay: true,
  dots: true,
  arrows: true,
  items: [],
};

樣式

什么，你告訴我顯示在頁面上的都是什么鬼？
來寫 scss 吧：

* {
  margin: 0;
  padding: 0;
}
.slider {
  overflow: hidden;
  width: 100%;
  position: relative;

  &>ul {
    height: auto;
    overflow: hidden;
    position: relative;
    left: 0;
    transition: left 1s;
  }

  .slider-item {
    display: inline-block;
    height: auto;

    &>img {
      display: block;
      height: auto;
      width: 100%;
    }
  }

  .slider-arrow {
    display: inline-block;
    color: #fff;
    font-size: 50px;
    position: absolute;
    top: 50%;
    margin-top: -50px;
    z-index: 100;
    padding: 20px;
    cursor: pointer;
    font-weight: bold;

    &:hover {
      background: rgba(0,0,0,.2);
    }

    &.slider-arrow-right {
      right: 0;
    }
    &.slider-arrow-left {
      left: 0;
    }
  }

  .slider-dots-wrap {
    z-index: 99;
    text-align: center;
    width: 100%;
    position: absolute;
    bottom: 0;

    .slider-dot {
      display: inline-block;
      width: 6px;
      height: 6px;
      border: 3px solid #ccc;
      margin: 6px;
      cursor: pointer;
      border-radius: 20px;

      &:hover {
        border: 3px solid #868686;
      }

      &.slider-dot-selected {
        background: #ccc;
      }
    }
  }
}

這里不多說了，樣式就這樣～
有疑問可以 call me。

謝謝謝謝，謝謝各位客官光看～ ? ? 啊哈 ?

? ? ? ? ?

文章原文：使用 React 實(shí)現(xiàn)一個(gè)輪播組件
我的博客地址：qiutc.me
歡迎來吐槽?。。?/p>

云服務(wù)器 GPU云服務(wù)器 react實(shí)現(xiàn)輪播圖 vue輪播組件 bootstrap輪播組件 viewpager實(shí)現(xiàn)輪播

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/78693.html

發(fā)表評論

登陸后可評論

0條評論

banana_pi

男|高級講師

我要關(guān)注我要私信

TA的文章

云計(jì)算廠商迎來升級拐點(diǎn)，邊緣計(jì)算布局或?qū)⒊蓻Q勝點(diǎn)

閱讀 3623·2021-11-24 10:19
【操作系統(tǒng)】—I/O設(shè)備的基本概念和分類

閱讀 3754·2021-09-30 09:47
開源一個(gè)代碼畫板工具

閱讀 1319·2019-08-30 15:56
XBlog： Vue+Express+Mongodb的全?？蓴U(kuò)展的完整博客系統(tǒng)

閱讀 822·2019-08-29 15:11
簡單說一道JS閉包面試題

閱讀 929·2019-08-29 13:43
JavaScript的作用域和塊級作用域概念理解

閱讀 3611·2019-08-28 18:25
Web技術(shù)的前世今生（一）

閱讀 2180·2019-08-26 13:27
JavaScript設(shè)計(jì)模式系列五：適配器模式

閱讀 1457·2019-08-26 11:44

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

使用 React 實(shí)現(xiàn)一個(gè)輪播組件

相關(guān)文章

面試官(6): 寫過『通用前端組件』嗎?

**網(wǎng)易音樂版輪播-react組件版本**

**網(wǎng)易音樂版輪播-react組件版本**

**網(wǎng)易音樂版輪播-react組件版本**

發(fā)表評論

0條評論

banana_pi

男|高級講師

TA的文章

云計(jì)算廠商迎來升級拐點(diǎn)，邊緣計(jì)算布局或?qū)⒊蓻Q勝點(diǎn)

【操作系統(tǒng)】—I/O設(shè)備的基本概念和分類

開源一個(gè)代碼畫板工具

XBlog： Vue+Express+Mongodb的全?？蓴U(kuò)展的完整博客系統(tǒng)

簡單說一道JS閉包面試題

JavaScript的作用域和塊級作用域概念理解

Web技術(shù)的前世今生（一）

JavaScript設(shè)計(jì)模式系列五：適配器模式

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

使用 React 實(shí)現(xiàn)一個(gè)輪播組件

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！