react+swiper 6 卡点记录

1.

从官网直接npm了最新版本的swiper

报错：Module build failed (from ./node_modules/@umijs/deps/compiled/babel-loader/index.js)

疑似包的版本依赖有问题

解决方案：降版本处理——版本："swiper": "6.8.4"

2.没有使用new Swiper创建swiper，而是使用swiper标签直接创建的element，获取swiper实例。

//创建state获取swiper实例
const [mySwiper, setMySwiper] = useState(null);

const progress = (param = 0) => {
    if (param < 100) {
        setPercent(param + 2)
        setTimeout(() => {
            progress(param + 2);
        }, 30);
    } else {
        //就可以在事件中使用swiper实例下的方法，自动切换slide
        mySwiper.slideTo(1, 1000, false)
    }
};


<Swiper
    className={_styles.swiper}
    slidesPerView={1}
    direction="vertical"
    mousewheel
    autoHeight
    onSlideChange={() => console.log('slide change')}
    //在这里setState给mySwiper
    onSwiper={(swiper) => setMySwiper(swiper)} 
    reachEnd={() => console.log('reachend')}
>
</Swiper>

3.要求swiper禁止鼠标拖拽切换slide，在外层div中加入class—— "swiper-no-swiping"

<Modal
    width={1000}
    visible
    maskClosable={false}
    footer={null}
    className={classNames(_styles.annualReportModal, "swiper-no-swiping")}
    style={{ overflow: 'hidden' }}
    onCancel={onClose}
>
   <Swiper
        className={_styles.swiper}
        slidesPerView={1}
        direction="vertical"
        mousewheel
        autoHeight
        onSlideChange={(v) => console.log('slide change',v)}
        onSwiper={(swiper) => setMySwiper(swiper)}
        reachEnd={() => console.log('reachend')}
    >
   </Swiper>
</Modal>

4. swiper7之前的版本，要使用配置选项需要手动引入

import { Swiper, SwiperSlide } from 'swiper/react';
import SwiperCore, { Mousewheel } from 'swiper';
SwiperCore.use([Mousewheel]);