Ionic React Swiper 未在 slidesPerView 属性 中显示幻灯片数量

Question

我是第一次将 Ionic 与 React 结合使用。使用滑动器时，每个视图的幻灯片数量 属性 未得到遵守，仅显示 1 张幻灯片。我做错了什么？

我正在使用以下导入：

`从 'swiper/react' 导入 { Swiper, SwiperSlide };

导入'swiper/swiper-bundle.css'`

<IonGrid>
    <IonRow>
       <IonCol size="3">
          <IonSelect
          onIonChange={((e) => {
            setForm({album: form.album, month: form.month, year: e.detail.value});
          })} 
          value={String(form.year)}>
            {[...Array(10)].map((num, i) =>
              <IonSelectOption 
                key={`year_${form.year - i}`}>
                  {form.year - i}
              </IonSelectOption>
            )}
          </IonSelect>
        </IonCol>
        <IonCol size="9">
          <Swiper 
          slidesPerView={6}
          onSwiper={(swiper) => console.log(swiper)} 
          onTap={(context) => onMonthTap(context)} 
          initialSlide={ form.month }>        
            {["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"].map((mon, idx) => {
              return (
                <>
                <SwiperSlide key={`month_${idx}`}>
                  <IonLabel>{form.month === idx ? <b>{mon}</b> : mon}</IonLabel>
                </SwiperSlide>
                </>
              )
            })}
          </Swiper>
        </IonCol>
      </IonRow>
  </IonGrid>

Answer 1

您可以将 slideOpts 作为参数传递给 swiper

// Optional parameters to pass to the swiper instance.
// See http://idangero.us/swiper/api/ for valid options.

const slideOpts = {
  initialSlide: 1,
  speed: 400
};

export const SlidesExample: React.FC = () => (
  <IonContent>
    <IonSlides pager={true} options={slideOpts}>
      <IonSlide>
        <h1>Slide 1</h1>
      </IonSlide>
      <IonSlide>
        <h1>Slide 2</h1>
      </IonSlide>
      <IonSlide>
        <h1>Slide 3</h1>
      </IonSlide>
    </IonSlides>
  </IonContent>
);

Answer 2

进行刷卡器更新有帮助，但只是在引入一些延迟之后。我不确定这是否是正确答案，但暂时对我有用。

<Swiper 
  slidesPerView={6}
  spaceBetween={10}
  onSwiper={(swiper) => setSwiperInstance(swiper)}
  onTap={(context) => onMonthTap(context)} 
  initialSlide={ month }
>    


useEffect(() => {
  const timeout = setTimeout(() => {
    swiperInstance && swiperInstance.update();
  }, 50);
}, [swiperInstance]);

Answer 3

使用 useLayoutEffect 而不是 useEffect 将在第一次绘制之前更新滑动器并且应该可以解决您的问题

  useLayoutEffect(() => {
      swiperInstance && swiperInstance.update();
  }, [swiperInstance]);

useLayoutEffect 内安排的更新将在浏览器有机会绘制之前同步刷新。