react轮播图swiper.js和antd走马灯的使用_antd carousel

本文主要记录两种方法的使用以及使用过程中遇到的问题。
本来很久之前就要写了，一直拖着，结果第二次又踩坑了上次同样的问题，一定得记录下来提醒自己！

一、Swiper

这是swiper.js官网​​​​​​​

1、引入swiper和swiper样式

//index.js
import Swiper from 'swiper'
import 'swiper/css/swiper.css';

一定要记得引入样式，不然展示效果会有问题。不同版本引入的样式路径可能不一样，可以自己去swiper文件下看下路径。

2、在页面需要使用轮播组件的地方引入swiper容器

//index.js
<div className='swiper-container' id='swiper-container1'>
    <div className='swiper-wrapper'>
        <div className='swiper-slide'>
            第一页轮播
        </div>
        <div className='swiper-slide'>
            第二页轮播
        </div>
    </div>
    <div className='swiper-pagination' id='swiper-pagination1' />
</div>

Swiper7使用的默认容器是'.swiper'，Swiper6以下使用的是'.swiper-container'。默认的容器类名一般不要删除，Swiper的默认样式是施加在该类名上的。这里我们使用了默认的容器类名'swiper-container' 、'swiper-wrapper'、'swiper-slide'、'swiper-pagination'。
如果需要加自定义样式，可以在'swiper-container' 的div上加自己的样式名。

两个id可写可不写，因为后续需要初始化swiper实例，如果当前页面只有一个轮播，可以直接使用类名，如果有多个轮播，可以添加不同的id去区分。

3、初始化swiper实例

const swiper1 = useRef(null)
 
const initSwiper1 = (length) => {
    swiper1.current = new Swiper('#swiper-container1', {
        autoplay: {
            disableOnInteraction: false, //用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay
            delay: 2000, //自动切换的时间间隔
        },
        loop: length > 1, //判断如果超过一页才循环
        pagination: {//分页器
            el: '#swiper-pagination1',
            type: 'fraction'
        },
    })
}

如果页面中只有一个轮播，可以不写id，初始化实例的时候直接用类名

const initSwiper1 = (length) => {
    swiper1.current = new Swiper('.swiper-container', {
        autoplay: {
            disableOnInteraction: false, //用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay
            delay: 2000, //自动切换的时间间隔
        },
        loop: length > 1, //判断如果超过一页才循环
        pagination: {
            el: '.swiper-pagination',
            type: 'fraction'
        },
    })
}

如果想要实现鼠标移入移出轮播容器的同时轮播暂停、播放功能，可以在轮播容器上加ref，再在初始化实例时实现这个功能

//index.js
const swiper1Ref = useRef(null)
<div className='swiper-container' id='swiper-container1' ref={ref => swiper1Ref.current = ref}>
 
</div>

const initSwiper1 = (length) => {
        swiper1.current = new Swiper('#swiper-container1', {
            autoplay: {
                disableOnInteraction: false, //用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay
                delay: 2000, //自动切换的时间间隔
            },
            loop: length > 1,
            pagination: {
                el: '#swiper-pagination1',
                type: 'fraction'
            },
        })
        if(swiper1Ref.current){
            swiper1Ref.current.onmouseover = () => {
                swiper1.current?.autoplay?.stop() //鼠标移入停止轮播
            };
            swiper1Ref.current.onmouseout = () => {
                swiper1.current?.autoplay?.start() //鼠标移出开始轮播
            }
        }
    }

另外如果数据来源有变动，需要重新初始化swiper实例时，记得先销毁实例，否则轮播时会魔性乱动。

swiper1.current && swiper1.current.destroy()
initSwiper1(length)

但是swiper.js有一个问题是：如果想要在轮播的页面绑定点击事件，有的页面点击事件是不生效的！之前百度过好像也有解决方法，但是好像很麻烦，就换了antd的走马灯，如果你也有点击这个需求，换走马灯比较方便。

二、antd Carousel

1、引入Carousel组件

import { Carousel } from 'antd'

一般项目都全局引入过antd的所有样式，这里就不要单独引入样式了

2、页面引入轮播容器

const [auto, setAuto] = useState(true)
<Carousel autoplay={auto} autoplaySpeed={1000}>
    <div>
      <h3 style={contentStyle}>1</h3>
    </div>
    <div>
      <h3 style={contentStyle}>2</h3>
    </div>
    <div>
      <h3 style={contentStyle}>3</h3>
    </div>
    <div>
      <h3 style={contentStyle}>4</h3>
    </div>
</Carousel>

这样看上去antd走马灯简单很多。

antd3.x存在一个问题是当你暂停了轮播之后无法再次开始轮播，把autoplay设为true也不生效，但是这个问题在antd4.x已经解决了。

antd3.x还存在一个问题就是获取从后端接口得来的数据渲染时，会偶现渲染最后一页数据再渲染第一页数据，4.x是否还存在这个问题还没有验证。

antd走马灯自带鼠标移入移出暂停、开始轮播功能。