Swiper Js 垂直循环不能正常工作以做出反应

Question

我尝试为 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;

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

谢谢

Answer 1

因为使用如此“小”的滑块，您显然可以滑动比其尺寸大得多的位置，而 Swiper 在滑动过程中不会执行任何操作。只需增加 loopedSlides 参数，直到获得所需的行为。

Swiper Js 垂直循环不能正常工作以做出反应

Swiper Js vertical loop doesn't work properly for react

swiper

reactjs

swiperjs

swiper.js