在react 中使用 Swiper@6.8.4 -（解决initialSlide初始化设置无效问题）

 下载Swiper

yarn add swiper@6.8.4 

 基础使用

引入模块：

import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/swiper-bundle.css';

基础使用：

<Swiper
    spaceBetween={5} // 间隔
    initialSlide={index} // 初始化显示第几个
    slidesPerView={7}  // 每页显示个数
    slidesPerGroup={6}  // 翻页个数
>

  {
    list.map((m, i) => {
      const { name = '', infoData = {} } = m;
        return (
          <SwiperSlide>
            <div className={styles.lineStrucType_start}>
              <img
                src={bdzImg}
                alt=""
                />
              <div style={{ fontSize: '1rem' }}>{name}</div>
            </div>
          </SwiperSlide>
        );
    })
  }
</Swiper>

添加额外模块（Pagination）

默认情况下，Swiper React使用Swiper的核心版本（没有任何附加组件）。如果要使用导航、分页和其他组件，必须先安装它们。

Swiper官方文档参考地址

// 引入 安装模块，导航模块
import SwiperCore, { Pagination } from 'swiper'
import 'swiper/components/pagination/pagination.min.css';

// 使用安装模块对引入的模块进行安装
SwiperCore.use([ Pagination ])

<Swiper
    spaceBetween={5}
    initialSlide={index}
    slidesPerView={7} 
    slidesPerGroup={6}  
    pagination={{ clickable: true }} // pagination配置
>

BUG:

遇到一个问题：在请求数据后，要将Swiper定位到特定的SwiperSlide。按理来说Swiper设定了initialSlide={index}的值应该就行，但没有生效。在传递数据的时候打印了一下对应的传值index的值，发现setState之后传的index确实有变化，但是Swiper并未定位生效，怀疑是initialSlide这个参数的改变并不能触发Swiper重绘。

解决方法：

方法一：在Swiper里onSwiper初始化SwiperObj实例，然后在改变请求数据改变之后SwiperObj.slideTo(index)去跳转。

<Swiper
    spaceBetween={5}
    initialSlide={0}
    slidesPerView={7} 
    slidesPerGroup={6}  
    pagination={{ clickable: true }}
    onSwiper={(el) => setSwiperObj(el)}
>


//数据请求完成之后
swiperObj.slideTo(index)

方法二：按照封装组件的思路，传的值确实是发生了变化但是接受值的参数initialSlide没有触发组件的更新改变，可以尝试新增一个key参数来接收变化的值，看下是否能触发更新重绘。发现确实有效。..

<Swiper
  key={index}
  spaceBetween={5}
  initialSlide={index}
  slidesPerView={7} 
  slidesPerGroup={6}  
  pagination={{ clickable: true }}
>