react中使用swiper之显示3条数据并且每次滚动一条

react中使用swiper的方法看这里：https://blog.csdn.net/tuzi007a/article/details/123347867

这次业务需求中遇到了一次滚动显示3条数据并且每次滚动一条：

如图，

从接口里拿到的数据中，有3条会显示在这里，

每次滚动会往上翻一条。

这里有两种处理方式，分别用到swiper的不同api 。

第一种是使用slidesPerView和loopedSlides

分别对应的是一个slide里面显示多少条数据 和 自动播放slide里面的多少条数据

好处是很美观，效果理想。

缺点是如果数据只有2条，不能滚动起来。

但是这个缺点也基本可以忽略，毕竟随随便便也能有3条以上的数据。

export const SwiperComp = (props) => {
    const { datas, texts } = props
    return <Swiper
        autoplay
        loop
        direction="vertical"
        observer
        observeParents
        observeSlideChildren
        style={{ height: '100%' }}
        slidesPerView={3}
        loopedSlides={3}
    >
        {
            datas && datas.map((item, index) => {
                return <SwiperSlide key={index}>
                    // 内容
                </SwiperSlide>
            })
        }
    </Swiper>
}

第二种方法，

是使用slidesPerGroup和loopFillGroupWithBlank

意思分别是把多少条数据分成一个组，然后一次滚动就会滚动这么多条数据 和如果有哪个组的数据不够3条，就会用空白数据填充到该组，二者是绑定的。

这个弊端很大，这两个属性要求从接口获取到的数据必须是每组数据条数的整数倍，

不然滚动的时候就会出现空白。非常的不美观。

代码如下：

export const SwiperComp = (props) => {
    const { datas, texts } = props
    return <Swiper
        autoplay
        loop
        direction="vertical"
        observer
        observeParents
        observeSlideChildren
        style={{ height: '100%' }}
        slidesPerGroup={3}
        loopFillGroupWithBlank
    >
        {
            datas && datas.map((item, index) => {
                return <SwiperSlide key={index}>
                    // 内容
                </SwiperSlide>
            })
        }
    </Swiper>
}