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

【问题标题】：Ionic React Swiper not showing number of slides in slidesPerView propertyIonic React Swiper 未在 slidesPerView 属性中显示幻灯片数量
【发布时间】：2021-11-27 23:46:28
【问题描述】：

我第一次使用 Ionic 和 React。使用 swiper 时，每个视图属性的幻灯片数量没有得到尊重，只显示了 1 张幻灯片。我做错了什么？

我正在使用以下导入：

`import { Swiper, SwiperSlide } from 'swiper/react';

导入'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>

【问题讨论】：

标签： reactjs ionic-framework swiper ionic5 swiperjs

【解决方案1】：

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

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


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

【讨论】：

【解决方案2】：

您可以将 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>
);

【讨论】：

我没有使用 IonSlides。我直接使用 Swiper，因为 IonSlides 即将被 Swiper - ionicframework.com/docs/react/slides 取代。我没有看到在 Swiper 中传递 options 属性的选项。
这正是您要找的：swiperjs.com/swiper-api#type-script-definitions
对不起，我不明白。您能否建议我在上面的代码中需要更改什么？
我观察到，只要我调整页面大小，它就会开始正常工作！想知道这里有什么问题吗？

【解决方案3】：

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

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

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

【讨论】：

抱歉，这对我不起作用。尝试此操作后，我遇到了原始问题。
我可以建议您发布一个完整的示例，因为这对我有用...粘贴您提供的代码不起作用，因为您没有包含依赖项
对不起，这是我可以发布的最大值。但是，如果您有任何想要澄清的事情，那么我将很乐意回答。我已经提到了 2 个导入。