如何在 React 的 Ionic 5 中锁定幻灯片

Question

我不知道如何在第一个 IonSlide 中锁定幻灯片。 我在 web 中没有找到解释。

const Slider: React.FC = () => {
return(
<IonApp>
    <IonContent >

 <IonSlides>

        <IonSlide >
         ...
        </IonSlide>

        <IonSlide>

          ...
        </IonSlide>

 </IonSlides>
</IonContent>
</IonApp>
)
}

Answer 1

看看useRef Hook。 您可以获得对ion-slides元素的引用，并在 Swiper 初始化后使用ionSlidesDidLoad事件调用lockSwipes方法：

import React, { useRef } from 'react';

const Slider: React.FC = () => {
  const slidesEl = useRef(document.createElement('ion-slides'))

  const handleSlidesLoad = () => {
    slidesEl.current.lockSwipes(true)
  }
  return (
    <IonApp>
      <IonContent>
        <IonSlides onIonSlidesDidLoad={() => handleSlidesLoad()} ref={slidesEl}>
          <IonSlide>
            ...
          </IonSlide>
          <IonSlide>
            ...
          </IonSlide>
        </IonSlides>
      </IonContent>
    </IonApp>
  )
}