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

Question

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

const Slider: React.FC = () => {
return(
<IonApp>
<IonContent >
<IonSlides>
<IonSlide >
...
</IonSlide>
<IonSlide>
...
</IonSlide>
</IonSlides>
</IonContent>
</IonApp>
)
}

Answer 1

看看useRefHook。您可以获取对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>
)
}