Swiper Js 垂直循环无法正常工作以进行反应答案

【问题标题】：Swiper Js vertical loop doesn't work properly for reactSwiper Js 垂直循环无法正常工作以进行反应
【发布时间】：2021-06-13 14:19:12
【问题描述】：

我尝试为 reactjs 设计一个时间选择器组件，比如 iOS 时间选择器。

我使用了两个垂直滑动器，一个用于一小时，另一个用于一分钟。

正如您在上面的照片中看到的，当我滑动底部时，它无法正常工作。它显示 59 ,58, 57 突然什么也没有，你应该再次刷卡以显示 56, 55, ...。它在小时选择器中有同样的问题。它显示 23、22、21 什么都没有，需要再次刷卡。这是我的代码：

CodeSandbox Link

import { Swiper, SwiperSlide } from 'swiper/react';
import styles from "./timePicker.module.scss"

const hours = Array.from(Array(24).keys())
const minutes = Array.from(Array(60).keys())

const TimePicker = () => {
    return (
        <div className={styles.timePicker}>
            <div className={styles.picker}>
                <Swiper
                    slidesPerView={3}
                    direction="vertical"
                    grabCursor
                    centeredSlides
                    loop
                >
                    {minutes.map(minute=>{
                        return (
                            <SwiperSlide key={minute}>
                                <div className={styles.time}>
                                    {(''+minute).padStart(2,'0')}
                                </div>
                            </SwiperSlide>
                        )
                    })}
                </Swiper>
            </div>
            <div>:</div>
            <div className={styles.picker}>
                <Swiper
                    slidesPerView={3}
                    direction="vertical"
                    centeredSlides
                    grabCursor
                    loop
                    autoplay
                >
                    {hours.map(hour=>{
                        return (
                            <SwiperSlide key={hour}>
                                <div className={styles.time}>
                                    {(''+hour).padStart(2,'0')}

                                </div>
                            </SwiperSlide>
                        )
                    })}
                </Swiper>
            </div>
        </div>
    );
}

export default TimePicker;

这是一个错误？还是我做错了什么？

谢谢

【问题讨论】：

标签： reactjs swiper swiperjs swiper.js

【解决方案1】：

因为有了这样一个“小”的滑块，你显然可以滑动比它的大小更多的东西，而 Swiper 在滑动过程中不会做任何事情。只需增加 loopedSlides 参数，直到获得所需的行为。

【讨论】：