轮播组件开发

本节目标：理解“轮播组件开发”的核心思路，并能把它用于实际开发或面试表达。 ==现在来开发== recommend ==组件，首先进入到== src ==目录下== application/Recommend/index.js ==中==

:
import React from 'react';
import Slider from '../../components/slider';
function Recommend() {
  //mock

数据

  const bannerList = [1, 2, 3, 4].map(item => {
    return { imageUrl: "http://p1.music.126.net/ZYLJ2oZn74yUz5x8NBGkVA==/109951164331219056.jpg" }
  });
  return (
    <div>
      <Slider bannerList={bannerList}></Slider>
    </div>
  )
}
export default React.memo(Recommend);

==现在就可以着手编写== slider ==组件的具体内容了。首先安装一个插件==

:
npm install swiper --save

==接下来，在== slider/index.js ==中：==

//components/slider/index.js
import React, { useEffect, useState } from 'react';
import { SliderContainer } from './style';
import "swiper/css/swiper.css";
import Swiper from "swiper";
function Slider(props) {
    const [sliderSwiper, setSliderSwiper] = useState(null);
    const { bannerList } = props;
    useEffect(() => {
        if (bannerList.length && !sliderSwiper) {
            let sliderSwiper = new Swiper(".slider-container", {
                loop: true,
                autoplay: {
                    delay: 3000,
                    disableOnInteraction: false,
                },
                pagination: { el: '.swiper-pagination' },
            });
            setSliderSwiper(sliderSwiper);
        }
    }, [bannerList.length, sliderSwiper]);
    return (
        <SliderContainer>
            <div className="slider-container">
                <div className="swiper-wrapper">
                    {
                        bannerList.map(slider => {
                            return (
                                <div className="swiper-slide" key={slider.imageUrl}>
                                    <div className="slider-nav">
                                        <img src={slider.imageUrl} width="100%" height="100%" alt="

推荐

" />
                                    </div>
                                </div>
                            );
                        })
                    }
                </div>
                <div className="swiper-pagination"></div>
            </div>
        </SliderContainer>
    );
}
export default React.memo(Slider);

==对应的== style.js ==文件==

:
import styled from 'styled-components';
import style from '../../assets/global-style';
export const SliderContainer = styled.div`
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin: auto;
  background: white;
  .before {
    position: absolute;
    top: 0;
    height: 60%;
    width: 100%;
    background: ${style["theme-color"]};
  }
  .slider-container {
    position: relative;
    width: 98%;
    height: 160px;
    overflow: hidden;
    margin: auto;
    border-radius: 6px;
    .slider-nav {
      position: absolute;
      display: block;
      width: 100%;
      height: 100%;
    }
    .swiper-pagination-bullet-active {
      background: ${style["theme-color"]};
    }
  }
`

==现在打开页面可以看到这个效果==:

==轮播的功能已经具备，但是这个效果并不是我们想要的，我们希望它是两边并不是完全空白，而是有一部分红色做衬托，如图==:

==这个效果如何来实现？如果说单纯去增加== Home ==组件的高度，那么其他的组件并不需要下面的这些红色背景，显然不合适，我们只能在== slider ==组件上做一些手脚。== ==我们在== SliderContainer ==标签内新建一个==

 div:
<div className="before"></div>

==样式已经写在上面的== style.js ==中了，大家可以翻到上面看看，还是比较== tricky ==的一个操作，相当于另外做了一层遮罩，我们之后开发歌手详情页同样会用到这个方法。== > 来自

 <https://juejin.im/book/5da96626e51d4524ba0fd237/section/5da9731ef265da5bb252fc6f>

轮播组件开发 ​

轮播组件开发