参考链接

Swiper文档

安装

yarn add swiper

使用 Swiper 插件

1. 引入 Swiper 以及样式

   import Swiper from 'swiper/dist/js/swiper.js';
   import "swiper/dist/css/swiper.css";

2. 如果轮播图数据是写死的话，可以在 componentDidMount 组件中初始化Swiper

   componentDidMount() {
       this.swiper = new Swiper('.swiper-container', {
           loop: true,
           autoplay:{ //自动播放，注意：直接给autoplay:true的话，在点击之后不能再自动播放了
               delay: 2500,
               disableOnInteraction: false, //户操作swiper之后，是否禁止autoplay。默认为true：停止。
           },
           pagination: {
               el: '.swiper-pagination',
               clickable: true, // 允许点击跳转
           }
       });
   }

3. 但一般情况下Banner的数据是异步生成的，所以需要在 componentDidUpdate 生命周期函数里进行判断，等加载完数据再初始化 Swiper，不然会出现只显示一张图片的 BUG

   componentDidUpdate(prevProps) {
       if (prevProps.banners.size === 0) {
           if(this.swiper){
               this.swiper.slideTo(0, 0);
               this.swiper.destroy();
               this.swiper = null;
           }
           this.swiper = new Swiper('.swiper-container', {
               loop: true,
               autoplay:{ //自动播放，注意：直接给autoplay:true的话，在点击之后不能再自动播放了
                   delay: 2500,
                   disableOnInteraction: false, //户操作swiper之后，是否禁止autoplay。默认为true：停止。
               },
               pagination: {
                   el: '.swiper-pagination',
                   clickable: true, // 允许点击跳转
               }
           });
       }
   }

完整代码

首页组件

import React, { Component, Fragment } from 'react';
import Header from '../../common/header';
import Swiper from 'swiper/dist/js/swiper.js';
import "swiper/dist/css/swiper.css";
import styles from './styles.styl';

class Index extends Component {
    componentDidMount() {
        this.props.changeIndexData()
    }
    componentWillUnmount() {
        if (this.swiper) { // 销毁swiper
            this.swiper.destroy()
        }
    }
    componentDidUpdate(prevProps) {
        if (prevProps.banners.size === 0) {
            if(this.swiper){
                this.swiper.slideTo(0, 0);
                this.swiper.destroy();
                this.swiper = null;
            }
            this.swiper = new Swiper('.swiper-container', {
                loop: true,
                autoplay:{ //自动播放，注意：直接给autoplay:true的话，在点击之后不能再自动播放了
                    delay: 2500,
                    disableOnInteraction: false, //户操作swiper之后，是否禁止autoplay。默认为true：停止。
                },
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true, // 允许点击跳转
                }
            });
        }
    }
    render() {
        const { picURL } = this.context;
        const { banners } = this.props;
        const bannerElements = banners.map((banner) => (
            <div className="swiper-slide" key={banner.get('id')}>
                <a href={banner.get('url')}>
                    <div className={styles.imgWrapper}>
                        <h2>{banner.get('title')}</h2>
                        <img src={picURL + banner.get('image')} width="100%" height="100%" />
                    </div>
                </a>
            </div>
        ));
        return (
            <Fragment>
                <Header title="首页" />
                <div className={styles.bannerSlider}>
                    <div className="swiper-container">
                        <div className="swiper-wrapper">
                            {bannerElements}
                        </div>
                      <div className="swiper-pagination-wrapper">
                    <div className="swiper-pagination clear" />
                    </div>
                    </div>
                </div>
            </Fragment>
        )
    }
}

export default Index;