6.这些天react中遇到的swiper坑！！！！

如何在react中使用swiper（个人用法，不喜勿喷）

安装

cnpm install swiper -S

使用

在所需组件中引入

import {Swiper,SwiperSlide} from 'swiper/react'
import 'swiper/swiper.scss'

组件return出的代码

<div className={allclass.main}>
                    <Swiper
                    slidesPerView="auto"
                    freeMode="false"
                    freeModeMinimumVelocity
                    spaceBetween={0}//slide之间的距离
                    onSlideChange={() => console.log('slide change')}
                    onSwiper={(swiper) => console.log(swiper)}
                    className={allclass.container}
                    >
                    <SwiperSlide className={allclass.slide}>
                        <img src={"https://image.hongbeibang.com/FpnqqRRn03WYpTjx8fK9ck9I96LZ?640X900&imageView2/1/w/640/h/896"} alt=""/>
                        <span>3款网红肉松小贝：爆浆/经典/拉丝（赠：2款美味肉松/沙拉酱制作）</span>
                    </SwiperSlide>
                    <SwiperSlide className={allclass.slide}>11</SwiperSlide>
                    <SwiperSlide className={allclass.slide}>22</SwiperSlide>
                    <SwiperSlide className={allclass.slide}>33</SwiperSlide>
                    </Swiper>
                </div>

其中的allclass是引入的样式

import allclass from "../../assets/css/allclass.module.scss"

引入的样式

.main{
        width:auto;
        height: 540px;
        background:fuchsia;
        .swiper-container{
            height:540px;
            width: auto ;
        }
        .slide{
            background:red;
            width: 320px;
            margin:0 0 0 30px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            img{
                width:320px;
                height:450px;
                border-radius: 8px;
            }
            span{
                width:320px;
                height: 80px;
                background:gold;
                font:30px sans-serif;
                color: #4a4945;
                font-weight: 900;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow:hidden;
                work-break:break-all;
                text-overflow: ellipsis;
                white-space: normal;
            }
        }
    }

如图即为代码运行结果（请忽略奇葩配色^^），这个swiper左右滑动补贴和，slide宽度自定义，每个slide之间距离自定义，具体用什么属性，我也很闹心！！！毕竟能做成这样，是我每个属性去看去试才找到的！！！心塞！！！！！！！！！！！！！！！！！！！！！