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

【问题标题】：How to lock slides in Ionic 5 in React如何在 React 的 Ionic 5 中锁定幻灯片
【发布时间】：2020-10-03 04:39:19
【问题描述】：

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

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

 <IonSlides>

        <IonSlide >
         ...
        </IonSlide>

        <IonSlide>

          ...
        </IonSlide>

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

【问题讨论】：

标签： javascript reactjs ionic-framework ionic5

【解决方案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>
  )
}

【讨论】：